Question

假设我们想要找出特定<h2>元素的颜色属性。

1）当试图弄清楚选择器的具体方式时，其中一条规则说，具有更多类的选择器比具有更少类的选择器更具体。因此，在以下示例中，特定<h2>的颜色应为绿色（此示例取自某个网站）：

.one .two .three .four .five .six .seven 
{
    color: green;
}


.eight .nine .ten
{
    color: blue;
}

a）首先，如果我在选择器中指定了多个类，则它不起作用...换句话说，文本将不是绿色或蓝色。知道为什么它不起作用吗？

b）如果选择器包含多个类，则忽略选择器不起作用的事实：是类 .two .three .four .five .six .seven 类 .one 的后代，还是我们特定的<h2>元素是所有这些类的成员？

2）另一条规则说，如果我们使用更多ID的选择器比具有更少ID的选择器更具体。因此，在以下示例中，特定<h2>的颜色应为绿色：

#one #two # three #four #five #six #seven
{
   color: green;    
}


#eight #nine #ten
{
   color: blue;
}

a）只有当 #two 是一个的孩子， #three #two <的孩子时，上述说法才有意义/ em>和 #one 等的孙子？！正确的吗？

3）我假设用户的css 文件中定义的更具体的选择器是在 author的css 文件中定义的不太具体的选择器上选择的？

感谢名单

编辑：

第一个CSS规则适用于所有类别为“seven”的元素，其中有一个类为“six”的ancester，后者又有一个类为“five”的祖先，依此类推。

嗯，你的意思是规则适用于元素E7，但仅限于： - E7是元素E6的类.seven和后代的成员 - E6是.six类的成员和元素E5的后代 - E5是.5类的成员和元素E4的后代等？

我是否也可以问一下我对第二个问题的假设（在最初的帖子中）是否正确？

Answer 1

第一个CSS规则适用于所有类别为“seven”的元素，其中有一个类为“six”的ancester，后者又有一个类为“five”的祖先，依此类推。

您发布的原始规则与任何h2标记都不匹配，除非它们具有“绿色”类和所有这些祖先元素。我认为你的例子非常复杂，因为当你拥有一组至少八个嵌套元素时，特殊性规则才会发挥作用！

一个更简单的例子是，它以三个不同的规则（没有特定的顺序）来定位h2标签：

h2 { color: red; }
.one h2 { color: green; }
.two .three h2 { color: blue; }

此示例中的h2将为红色：

<h2>Heading 2</h2>

此示例中的h2为绿色：

<div class="one">
    <h2>Heading 2</h2>
</div>

此示例中的h2将为蓝色。即使.one是最近的祖先，.two和.three也意味着后一个CSS规则适用。

<div class="two">
    <div class="three">
        <div class="one">
            <h2>Heading 2</h2>
        </div>
    </div>
</div>

类似的过程适用于ID，但ID的类别为“权重”的10倍。有关详细信息，请查看w3 specs。这是一个非常难以理解的话题，但我希望这能使一切变得更加清晰！

老实说，这种情况并没有经常出现 - 我试图保持我的CSS规则相当通用，并避免使用不同类名的许多嵌套元素。如果你不得不计算出特异性，那么你的HTML可能会变得太复杂了！

Answer 2

当你在类选择器之间放置空格时，它意味着......的后代“

相反，你应该把它们全部放在一起：

.one.two.three.four.five.six.seven 
{
    color: green;
}


.eight.nine.ten
{
    color: blue;
}

这意味着具有所有这些类的元素将变为彩色，而不是具有该顺序的类的所有元素的后代。

特异性和类选择器（级联）

2 个答案: