更多的选择器

更多伪类选择器

1. :first-child

选择第一个子元素

first-of-type，选中子元素中第一个指定类型的元素

2. :last-child

3. :nth-child

选中指定的第几个子元素

even：关键字，等同于2n odd: 关键字，等同于2n+1

4. :nth-of-type

选中指定的子元素中第几个某类型的元素

更多的伪元素选择器

1. ::first-letter

选中元素中的第一个字母

2. ::first-line

选中元素中第一行的文字

3. ::selection

选中被用户框选的文字

更多的样式

透明度

1. opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
2. 在颜色位置设置alpha通道(rgba ) [如果想要精细化设置可以使用]

a{
    color:rgba(0,0,0,0.5);
}

鼠标

使用cursor设置

除了默认提供的，我们还可以设置自定义图片。 auto类似font-family的auto属性，如果找不到，那就使用系统默认的。

li{
   cursor: url("img/cursor.png") auto;
}

盒子隐藏

1. display:none，不生成盒子
2. visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。

背景图

和img元素的区别

img元素是属于HTML的概念

背景图属于css的概念

1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图

涉及的css属性

1. background-image

2. background-repeat

默认情况下，背景图会在横坐标和纵坐标中进行重复(可以单独设置在x轴上重复还是y轴上重复)

3. background-size

预设值：contain、cover，类似于object-fit 数值或百分比

background-size:100%;//横向100%，纵向自适应

4. background-position

设置背景图的位置。

预设值：left、bottom、right、top、center

数值或百分比

雪碧图（精灵图）（spirit）[一般使用px单位来设置]

div{
    background-position:top center;//x靠上，y居中
}

5. background-attachment

通常用它控制背景图是否固定。

6. 背景图和背景颜色混用

可以同时使用背景图和背景色，当背景图不够时，自动使用背景色填充

7. 速写（简写）background

div{
    background:url(bg.png) no-repeat center/100% fixed #000;//要先写位置再用/分割写尺寸
}

补充:

• 元素的outline外边框是不占据盒子空间的，在设置border影响空间大小时可以考虑使用。
• 计算尺寸往往是一件复杂的事情，所以在真实的开发中，只能细心小心的去计算。

---