CSS:子选择器的优先级高于类选择器? [英] CSS: Child selector higher precedence than class selecctor?

问题描述

我有以下HTML:

<div class="form-square">
     <div class="seven-col">
        Hello World!
      </div>
</div>

以及以下CSS:

div.form-square > div {
    padding: 50px;
}

.seven-col {
    padding: 0;
}

Firefox和Firebug使用两个CSS规则中的第一个.为何"div.form-square> div"比".seven-col"具有更高的优先级?

Firefox and Firebug is using the first of the two CSS rules. How come "div.form-square > div" has higher precedence than ".seven-col" which is more specific?

推荐答案

div.form-square > div由1个类选择器+ 2个类型选择器(加上一个子组合器)组成.

div.form-square > div consists of 1 class selector + 2 type selectors (plus a child combinator).

.seven-col包含1个类选择器.

类选择器的数量相等，因此比较是在类型选择器中完成的.第一个选择器具有更多的类型选择器，因此更加具体.

The number of class selectors is equal, so the comparison is done in type selectors. The first selector has more type selectors so it is more specific.

特异性基于整个事物中每种选择器的数量，而不是最右边组合器右侧的部分.

Specificity is based on the number of each kind of selector in the entire thing, not for the part on the right hand side of the rightmost combinator.

(注意:第一个示例也具有CSS 2所谓的子选择器，但不计入具体性，它描述了元素之间的关系而不是元素的功能，这可能就是CSS 3将其重命名为儿童组合器.

(NB: The first example also has what CSS 2 calls a child selector, but that doesn't count towards specificity and describes a relationship between elements rather than a feature of an element, which probably why CSS 3 is renaming it to the child combinator).

这篇关于CSS:子选择器的优先级高于类选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！