CSS3的常用属性（一）

前端外刊评论

2018-02-01

E:first-child： 选择所有元素的第一个子元素<E>（该伪类很容易让人误解，且是在CSS2中定义）
- p:first-child 表示选择器匹配任何元素的第一个子元素<p>
- p>i:first-child 表示选择器匹配所有<p>元素的第一个子元素<i>
- p:first-child i 表示选择器匹配任何元素的第一个子元素<p>中的所有<i>元素
E:last-child： 选择元素的最后一个子元素（与E:first-child相似）
E:nth-child(n)： 选择所有元素的子元素<E>，且<E>元素是符合n制定的规则的
- E:nth-child(3)：选中第3个子元素<E>
- E:nth-child(n)：选中全部的子元素<E>，因为n遵循线性变化，从0，1，2，3，4…… 当n<=0时，选取无效
- E:nth-child(2n-1)：选中所有的奇数的<E>
- E:nth-child(-n+5)：选中前5个<E> 注意： E:nth-child(5-n) 这样写是没有作用的
- E:nth-last-child(-n+5)：选中后5个<E>
- E:nth-child(even)：选中所有的偶数的子元素<E> 补充： E:nth-child(odd) 所有的奇数
E:empty： 选中没有任何内容的<E>元素，包括空格
E:target： 结合锚点进行使用，出于当前锚点的元素会被选中
其他不常用伪类选择器如： :nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type等

E::before，E::after： <E>元素内部的开始和结束创建一个元素，该元素是行内元素，且需结合content属性使用
特别说明：这两个选择器在旧版本当中是伪类选择器（不存在伪元素的概念），新版本下E:before，E:after会被自动识别为E::befote，E::after

rgba(0,0,0,0.1)： 色彩空间，一种新的颜色的表示方式，其中R（red），G（green），B（blue），A（alpha，不透明度）
hsla(200,%10,%10,1)： H（hue，色调，取值范围0~360，其中0/360表示红色，120表示绿色，240表示蓝色），S（saturation，饱和度，取值范围0%~100%），L（lightness，亮度，取值范围0%~100%），A（alpha，不透明度，取值范围0~1）
补充： opacity（不透明度）只能针对整个盒子设置，子盒子及其内容会继承父盒子的不透明度，而rgba，hsla可应用于任何设置颜色的地方，且不具有继承性

text-shadow： 可分别设置偏移量，模糊度，颜色（可设透明度）
- 水平偏移量：正值向右，负值向左
- 垂直偏移量：正值向下，负值向上
- 模糊度不能为负值
  举例说明：
```
文字凸起：
.tu{
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;      
}<br />.ao{<br />text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;<br />}
```

box-sizing： css中通过box-sizing来指定盒子模型；box-sizing有两个值；分别是：
- content-box：盒子的实际宽度等于width值加上border值加上padding值，是默认值
- border-box：盒子的实际宽度等于设置的width值，即使定义了border和padding，也不会改变盒子的实际宽度