特异性和类选择（级联）

Question

假设我们要找出什么会特别<h2>元素的颜色属性。

1）在试图找出一个选择具体怎么是，规则的一个说，选择与班级更大数量比用较少的班级选择更具体。因此，在下面的示例中的特定<h2>的颜色应该是绿色的（这个例子是从一些网站采取的）：

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


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

一）首先，如果我指定不止选择器中有一个类，那么它不起作用......换句话说，文本不会是绿色或蓝色。任何想法为什么它不起作用？

B）忽略了一个事实，如果它包含一个以上的类选择是行不通的： 特有的类。二。三。四。五。六。七类后裔。一或我们特定的<h2>元素是所有这些类的成员吗？

2）另一条规则说，如果我们带选择ID的更大的数量比用更少的ID选择更具体。因此，在下面的示例中的特定<h2>颜色应该是绿色：

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


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

一）上述要求是有道理的只有#two是一个＃一个孩子，#three一孩子#two和孙子＃一个 etc ?!正确？

3）I假设在用户的CSS文件中定义的更具体的选择器被选择过在作者的CSS文件中定义的特定的选择少？

感谢名单

编辑：

第一CSS规则适用于与类的 “七” 的所有元素，其中有一个祖先与类的“六”，而“六”又具有“五”的祖先等等。

严，你的意思是规则适用于元素E7，但只有： - E7是类的成员。E6是元素E6的类别.six和后代的成员E6 -E5是类别.5的成员和元素E4的后代等。 ？

我还问，如果我对我的第二个问题的假设（在战后初期）是正确的？

Answer 1

第一个CSS规则适用于所有具有“七”类的元素，其中有一个“六”类的祖先，而“六”类的祖先具有类“五”的祖先，依此类推。

您发布的原始规则与任何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

当你把类选择之间的空隙，就意味着“后裔” ...

相反，你应该把他们都togheter：

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


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

这意味着，所有这些类的元素会变成有色的，而不是所有元素的后代，而这些元素的顺序依次是类。