CSS选择器的优先级是什么

Question

CSS问题:如果两个不同的选择器适用于一个元素,谁赢了？

我知道这不应该发生,但我想调整一个遗留应用程序,而CSS正处于中间位置.

Answer 1

规范中的血腥细节实际上是相当可读的.综上所述:

1. !important规则和内联style规则赢得最多.

2. 否则,通常更具体的胜利.#id是比.classname一个更具体的选择器更具体的选择器tagname.

3. 规则同样具体,最后宣布的规则获胜.

没有特别的理由说明"不应该发生这种情况".指定宽刷规则然后添加更具体的规则来定位一个案例是正常的; 单个元素上的多个相同属性规则并不罕见或不合需要.

Answer 2

你必须在选择器中找到#no of id = A,#no of class = B和#no of tag = c

价值较高的ABC获胜.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100> 022> 021

所以#foo获胜

Answer 3

它应该发生!这就是为什么它被称为CASCADING样式表.您可以在此处找到优先级的示例

Answer 4

“#id”比“.class”名称更强大，“.class”比“tag”名称更强大。但如果我们应用“！important”，那么它的优先级就是其中的大多数。

• ！重要的
• 内联样式
• ID
• 班级
• 标签