css 选择器的权重是怎样的?

首先我们来看一下有哪几个选择器:

  • ID 选择器:ID 的值不允许有重复的,代表唯一性。通过 # 选择元素
  • 类选择器:用来将多个元素规成一类,并且可以对这一类 class 的元素应用样式
  • 元素选择器:通过写标签来选择,表示页面所有这个标签元素

CSS 选择器权重:

ID 选择器 > Class 选择器 > 元素选择器

当 CSS 内容的选择器只有一个时,通过上述的权重排序进行选择,优先应用权重大的样式内容,如果有冲突的话。

当使用多个选择器来复合选择时,比如 .list #sec.ul li 这样的。可以先将相同权重的进行比较,比如这俩都有 Class 选择器,则抵消,再比较后面剩下的,剩下的是 #sec 的权重更高,所以优先应用前者的样式,如果有冲突的话。

评论区
头像