CSS选择器（二）复杂选择器

image.png

选择器的优先级

CSS标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级。

• id选择器的数目记为a；
• 伪类选择器和class选择器的数目记为b；
• 伪元素选择器和标签选择器数目记为c；
• “*” 不影响优先级。

specificity = base * base * a + base * b + c

base是一个“足够大”的正整数

!import：相当于一个新的优先级，而且此优先级会高于行内属性

样式出现先后顺序：

示例：

<div id="my" class="x y">text<div>
<style>
.x {
    background-color:red;
}
.z{
    background-color:yellow;
}
.y {
    background-color:green;
}
</style>

div为green

建议

• 根据 id 选单个元素
• class和class的组合选成组元素
• tag选择器(标签选择器)确定页面风格

伪元素

• ::first-line(排版后的第一行)
  • CSS标准规定了first-line必须出现在最内层的块级元素之内
• ::first-letter(第一个字母)
  • 它的位置在所有标签之内
• ::before
  - 在元素内容之前插入一个虚拟的元素
• ::after
  • 在元素内容之后插入

::before 和 ::after 还支持content为counter

<p class="special">I'm real element</p>
<style>
  p.special::before {
    display: block;
    content: counter(chapno, upper-roman) ". ";
}
</style>

---

附

• CSS标准只要求 ::first-line 和 ::first-letter 实现有限的几个CSS属性，都是文本相关，这些属性是下面这些。

  
  image.png