君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>css>正文

CSS包含选择器的优先级详情说明及案例

2023-12-12 20:15 君语贤优先级包含选择器

CSS包含选择器的优先级详情说明及案例

包含选择器(Compound Selectors)是由多个简单选择器组合而成的选择器,它可以更准确地选中需要样式化的元素。包含选择器的优先级计算与简单选择器的优先级相似,只不过它是由多个简单选择器的优先级相加得到的。下面是包含选择器的优先级详情说明及案例:

1. 类型选择器 + 类选择器

div.container {
  color: red;
}

这个选择器会选择所有类名为containerdiv元素。其优先级计算为:类型选择器(1) + 类选择器(10) = 11。

2. 类型选择器 + 类选择器 + 子选择器

ul.nav > li.active {
  background-color: yellow;
}

这个选择器会选择父元素为ul、类名为nav的元素下的直接子元素为li且类名为active的元素。其优先级计算为:类型选择器(1) + 类选择器(10) + 子选择器(1) = 12。

3. ID选择器 + 类型选择器 + 类选择器

#header div.menu .item {
  font-weight: bold;
}

这个选择器会选择idheader的元素下的子元素中,类型为div,类名为menu的元素下的类名为item的元素。其优先级计算为:ID选择器(100) + 类型选择器(1) + 类选择器(10) = 111。

4. 类型选择器 + 伪类选择器

a:hover {
  text-decoration: underline;
}

这个选择器会选择鼠标悬停在a标签上的时候应用的样式。其优先级计算为:类型选择器(1) + 伪类选择器(10) = 11。

5. 通配选择器 + 类选择器

* .important {
  color: orange;
}

这个选择器会选择具有类名为important的任何元素。其优先级计算为:通配选择器(0) + 类选择器(10) = 10。

6. 多个类选择器

.button.primary {
  background-color: blue;
}

这个选择器会选择同时具有buttonprimary类名的元素。其优先级计算为:类选择器(10) + 类选择器(10) = 20。

注意事项:

  • 优先级的计算是通过对应选择器的部分相加而得的,不同部分的选择器之间是相互独立的。
  • 选择器的权重值越高,优先级越高,同一选择器部分内的简单选择器个数不影响优先级。
  • 优先级的计算规则可以用一个三元组(a,b,c)表示,其中a、b、c分别代表ID选择器、类选择器和元素选择器的数量。

理解和掌握CSS选择器的优先级对于正确应用样式和处理样式冲突是非常重要的。