Question

已经有很多与此相关的问题。但我还不清楚。也不确定问题的标题是否正确。这是我的问题：

以下CSS代码的含义是什么？

#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }

根据我的理解，如果我错了，请纠正我：

第1行： ID =“nav”的任何元素中的每个li元素都会有样式cssA

第2行：当我将光标放在id =“nav”的任何元素中的每个li元素上时，将会有样式cssB

第3行：ID =“nav”的任何元素中每个a元素中的每个li元素都将具有样式cssC

第4行：当我将每个a元素悬停在id =“nav”的任何元素中的每个li元素内时，将具有样式cssD

第5行：每个span元素中的每个a元素中的每个ul元素中的每个li元素中的每个cssE元素“nav”将具有样式ul。除非父元素具有id =“nav”

，否则任何其他a或{{1}}元素都不会具有此样式。

Answer 1

除了.over之外的所有内容都是正确的。“代表一个班级。和“＃”代表ID。但是，你已经把这个概念搞定了。

此外，如果你想要标题所说的“覆盖”，你会添加

!important

到你想要优先于其他规则的任何规则的末尾。

Answer 2

你可以通过赋予！important来覆盖css，或者你可以给出内联样式。内联css的优先级高于外部css

Answer 3

所有现有的答案都是正确的，但它比已经给出的要多一些。

正如已经说过的那样，＆＃34; li.over＆＃34;是一个组合选择器 - 它将选择具有＆＃34; over＆＃34;类的li元素。如果您想在鼠标结束（悬停）元素时使用不同的CSS属性或属性值，那么您可以使用伪类选择器＆＃34; li：hover＆＃34;。这些被称为伪类，因为您不是选择属于文档的一部分，而是基于元素的状态。还有伪元素，它们在文档中也不是直接的，而是文档结构的逻辑扩展 - 例如first-child，first-of-type，5th-of-type，奇怪的物品等。

＆＃34; #nav li ul a span＆＃34;是一个后代选择器，正如你所说，它将选择每个父级的子级（在任何级别），所以＆＃34; #nav li＆＃34;选择＆＃34; li＆＃34; ID为＆＃34; nav＆＃34;的项目中包含的元素 - 甚至几个级别。

如果您想选择父母直接孩子的项目，那么您可以使用＆＃34;＆gt;＆＃34;符号。即＆＃34; #nav＆gt;李＆＃34;将选择直接位于ID为＆＃34; nav＆＃34;的任何项目下方的li元素，但不选择任何属于该元素子元素的li元素，或者实际上属于该元素的元素。

顺便提一下＆＃34;＃nav＆＃34;完全等同于＆＃34; *＃nav＆＃34;因为它选择任何带有ID的元素，你也可以写＆＃34; ul＃nav＆＃34;如果您只想选择带有ID的ul元素。这又可以与一个班级结合起来＆＃34; ul＃nav.bar＆＃34;甚至是多个班级＆＃34; ul＃nav.bar.touch＆＃34;。

删除这样的选择器之间的空间将它们组合在一起，所以在最后一种情况下，而不是寻找带有类＆＃34的项目;触摸＆＃34;在一个带有类＆＃34; bar＆＃34;的项目中在ID为＆＃34; nav＆＃34;的项目中在一个＆＃34; ul＆＃34;你要选择一个＆＃34; ul＆＃34; ID为＆＃34; nav＆＃34;以及两个班级＆＃34; bar＆＃34;并触摸＆＃34;。像这样的元素 -

<ul class="bar touch" id="nav">...</ul>

也可以使用属性选择器，因此如果您想选择将在新窗口中打开的链接，您可以使用＆＃34; a [target = _blank]＆＃34; - 根据属性和值的存在进行选择 - 或者如果您想选择具有任何 href值的链接，您可以使用＆＃34; a [href]＆＃34;。这只是选择具有此属性的所有元素。

除此之外，您甚至可以选择与另一个元素相邻（旁边）的项目，如果您想直接选择图像后面的所有段落，那么您将使用＆＃34; img + p＆＃34;在你的选择器中，或者＆＃34; p + img＆＃34;如果你想直接在段落后选择图像。与往常一样，选择器中的最后一项是应用样式的项目。

通常认为不要过度使用CSS选择器是一种好习惯，因为它会使您的代码重复性降低。除非你需要写＆＃34; div.widget＆＃34;只需写下＃34; .widget＆＃34;否则你将无法创建一个＆＃34;小部件＆＃34;使用其他元素，以后在您可能需要的情况下更难以覆盖这些属性。

要结束选择器，MDN上的CSS选择器有一个很好的介绍，Code School (paid course provider)也有一个很好的CSS在线基础课程，价格非常合理，可以通过选择器一些细节。

关于覆盖类，你应该理解另外两个概念 - 级联顺序和特异性。

给出一段HTML片段 -

<div class="widget">
  <p>
    Some text you want to style
  </p>
</div>

以下CSS -

#widget p { color: yellow; }
p { color: blue; }

文本的颜色为黄色而不是蓝色，因为第一个选择器的特异性比第二个选择器更高（更具体）。为了理解这一点，我建议你玩Specificity calculator，并阅读有关该主题的Smashing Magazine tutorial。

简而言之，内联样式胜过所有，并且选择器越具体，就越有可能应用它来代替否则将应用不同属性值的其他选择器。具有最高特异性得分的选择器中的值＆＃34;胜出＆＃34;，但是具有较低特异性的选择器的其他属性值不会发生冲突也将仍然应用于该元素。

例如，改变我们早期的CSS -

#widget p { color: yellow; }
p { 
     color: blue;
     font-weight: bold;
  }

文本仍为黄色，但也为粗体，因为选择器中没有给出更高特异性的font-weight属性。

您应该了解的最后一个概念是当两个或多个规则具有相同的特异性时会发生什么。

#widget p { color: yellow; }
#widget p { 
     color: blue;
     font-weight: bold;
  }

在这种情况下，我们的文字现在是蓝色的，因为第二个规则在样式表后面出现，因此会覆盖第一个规则。如果您有多个样式表，那么最后一个样式表中出现在文档头中的规则将覆盖具有相同特征的规则。

在几乎所有情况下，您都应该使用样式表中更具体或选择器的顺序，以便将正确的样式应用于正确的元素，绝对不应该经常使用！除非绝对必要，否则必须达到这一目标。请参阅http://james.padolsey.com/usability/dont-use-important/以获得比我在此处给出的更全面的解释，但它很快变得无法维护（当所有事情都很重要时，您会怎么做？＃34;）对于可能希望覆盖的用户来说，它也无法访问您的用户代理样式表（浏览器本地）中的样式，以帮助他们阅读或使用页面（增加字体大小，与背景颜色对比等）。

覆盖CSS中的类

3 个答案: