CSS结构原理（二）——伪类、伪元素与样式特性

伪类

伪类，顾名思义这是一种所谓的“类”，但是又和正常的类有所区别，区别在于，人们在伪类上附加样式的时候，其不用在标签中声明，就可以直接使用

UI伪类

显然这类伪类与UI是息息相关的，当界面处于某个状态时（例如链接被点击），这时UI伪类的状态就会被触发。

• 链接伪类:即a标签做携带的伪类。这里不做过多赘述，有四个简记为LVHA。
• e:focus
• e:target，就是被a元素指向的元素，当a被点击跳转到target元素时，target元素所触发的样式

需要注意的是，在css3中，已经出现了新加入的伪类（e::fonxus...)建议的是，尽量不要只用一个冒号，因为这个会被慢慢废弃。

结构化伪类

指的是应用在dom结构上的一类伪类 也比较简单，常用的有：：first-child、last-child、nth-child(n),需要注意的是n是指父节点下的第几个子节点，第一个为1，此外，它的赋值还可以是even或者add。

伪元素

其实可以把它看做元素的一部分 常见的有

• ::first-letter
• ::first-line
• ::before
• ::after

后两个伪元素用于在e元素的前后添加一些东西e.g：p.age::before{content:"Age："；}

样式特性

继承

css的继承机制是很人性化的，css在父子样式之间会选择（当然不是动态选择）一些对子代有用的样式让子代继承，比如字体相关的一些属性，所以在设置相对字体大小的时候要格外注意，当父元素的字体大小为80%时，子元素的字体元素也会是80%（针对父元素），所以真实的大小就是64%。其他的相对大小样式也是如此。另外的，类似边框这样的属性，很明显被子元素继承是不合适的。所以子代自然不会继承它。

层叠

要理解层叠，我们可以用一个立体的盒子来打比方，用户从盒子一个透明的面上往里看，这就是我们呈现给用户的界面，css的样式层叠，可以看做是与透明面平行但是在透明面后可以一片一片平行透明层插入的板子，最后用户在透明层网盒子里看时，得到的便是css样式层叠出来的摸样。

层叠是有顺序而言的，就像是板子要按顺序插入，蓝色的在红色的前面.....在css中层叠顺序如下：

• 浏览器默认样式
• 用户样式表
• 作者链接样式表
• 作者嵌入样式
• 作者行内样式

越在下面的样式优先级越高，也就是越接近透明面。

层叠规则：

• 按照上述的层叠顺序依次给每个标签添加样式，相同元素后来的样式覆盖先来的。但是可以在样式后面加上（!important）来增加权重。这样就不会被后来的给覆盖了。按照特制度层叠，比如下面的例子中，后者的特制度就比前者要高，所以后者样式覆盖前者。

p{font-size:32px}
p.smaller{font-size:20px}
复制代码

计算特指度

我们可以使用“ICE”公式来计算特指度，计分方式如下：

• 选择符上有ID就在I上加1
• 选择符上有类就在C上加1
• 选择符上有一个元素就在E上加1

查理版层叠要点

• 包含ID选择符的胜过包含类选择符的胜过包含标签选择符的
• 对于同一标签的同一属性，首先按照上述的样式表顺序排比，然后在同一个样式表特制度相同的两个样式，后声明的优先。
• 某种程度上来说，选择符越明确，特制度越高
• 设定的样式胜过继承的样式

转载于:https://juejin.im/post/5ac8531e6fb9a028c22b02bd