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,所以前面一个样式优先,盖过第二个样式

今天的总结就到这里,感谢您的阅读!

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~

  • 厉害哦
    • 努力向前
      回复
      枫枫
      过奖了,这篇是看了别的大佬博客,然后自己随便整理的~(*´∀`*)
  • 留言
    • 努力向前
      回复
      十三
      能看到吗?
    • mi
      回复
      十三
      快发布你的文章了!!
    • 十三
      回复
      mi
      晓得咯
  • 来瞅瞅~