CSS元素选择器及其优先算法

CSS 选择器

这一块可以说是很基础了，只有用选择器选中元素，才能使样式生效

元素选择器(标签选择器)

直接选中原生 html 标签名，该选择器可以说是优先级最低的了，在没有其它类型选择器时才会考虑它

div {
  width: 100px;
  height: 50px;
}

id选择器

选中标签定义的 id 名字，该选择器高于类选择器但是低于内联样式

#great {
  width: 100px;
  height: 50px;
}

class选择器

选中标签中定义的 class 名字，该选择器优先级高于标签选择低于 id 选择

.great-class {
  width: 100px;
  height: 50px;
}

子元素选择

基于上面的方式衍生的，目的是为了区别不同父标签下相同 标签名，id 名，类名的元素。

#great div{
  width: 100px;
  height: 50px;
}
.great-class aside span{
  width: 100px;
}

群组选择器

同时选中多个元素，用逗号隔开

#great, .great-class, div{
  width: 100px;
  height: 50px;
}

相邻选择器

选中相邻的兄弟元素

<div id="one"></div>
<section></section>

#one + section{
  width: 100px;
  height: 50px;
}

属性选择器

选中指定属性值的所有元素

<div title="one">one</div>
<section>
  <p class="two">two</p>
</section>

div[title="one"] {
  color: red;
}
p[class="two"] {
  color: blue;
}

伪类元素

可以根据元素的状态来进行样式的改变

伪元素

• :first-line 匹配元素的第一行
• :first-letter 匹配元素的第一个字母
• :before 在元素之前插入生成的内容
• :after 在元素之后插入生成的内容

常见伪类

• :first-child 父元素下第一个孩子
• :link 未被点击的链接
• :visited 已被点击的链接
• :active 鼠标按在上面但是没有释放
• :hover 鼠标悬停
• :focus 获得鼠标焦点

div:first-child {
  font-size: 17px;
}
div:hover {
  color: green;
}

结构性伪类

• :nth-child(n) 父元素下第 n 个子元素

选择器优先级算法

众多类型的选择器方式，还可以组合使用，那么如何区分呢

优先级由 A，B，C，D 四个值确定，计算规则如下

• 存在内联样式，A = 1，否则 A = 0
• B 的值等于 ID选择器 出现的次数;
• C 的值等于 类选择器 + 属性选择器 + 伪类 出现的总次数;
• D 的值等于 标签选择器 + 伪元素 出现的总次数

将四个值当成一个序列，(A，B，C，D)，按照从左往右的顺序依次比较，较大者直接胜出，相等继续比较下一位，如四个值都相等，后面的样式覆盖前面的

<div id="one" class="two">
  <p></p>
</div>

#one p:hover {
  font-size: 17px;
}
.two p:hover {
  color: green;
}

• 第一个样式 (0, 1, 1, 1)
• 第二个样式 (0, 0, 1, 1)

比较到第二位也就是 B 时，1 > 0，所以前面一个样式优先，盖过第二个样式

今天的总结就到这里，感谢您的阅读！