2

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

下面的 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 行：li id="nav" 的任何元素中的每个元素都将具有样式cssA

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

第 3 行： id="nav" 的任何元素中的每个a元素中的每个元素都将具有样式licssC

第 4 行：当我将每个元素悬停在 id="nav" 的任何元素a中的每个元素中时，都会有样式licssD

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

4

3 回答 3

3

除了.over，“。”之外，您在所有方面都是正确的。代表一个类。“#”代表ID。但是，是的，你已经理解了这个概念。

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

!important

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

于 2013-01-17T18:07:47.863 回答
3

您可以通过提供 !important 来覆盖 CSS，也可以提供内联样式。内联 css 的优先级高于外部 css

于 2013-01-17T18:13:22.423 回答
0

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

正如已经说过的，“li.over”是一个组合选择器——它将选择也具有“over”类的 li 元素。如果您想在鼠标悬停（悬停）元素时使用不同的 CSS 属性或属性值，则使用伪类选择器“li:hover”。这些被称为伪类，因为您不是选择文档的一部分，而是基于元素的状态。还有一些伪元素也不是直接在文档中，而是文档结构的逻辑扩展 - 例如第一个孩子、第一个类型、第五个类型、奇数项等。

“#nav li ul a span”是一个后代选择器，正如您所说，它将选择每个父级的子元素（在任何级别），因此“#nav li”选择包含在具有 ID 的项目中的“li”元素“ nav" - 甚至下降了几个级别。

如果要选择作为父项的直接子项的项目，则可以使用“>”符号。即“#nav > li”将选择直接位于 ID 为“nav”的任何项目下方的 li 元素，但不会选择作为该元素的子元素的任何 li 元素，或者实际上是低于该元素的元素。

顺便说一句，“#nav”完全等同于“*#nav”，因为它选择任何具有 ID 的元素，如果您只想选择具有 ID 的 ul 元素，也可以编写“ul#nav”。这又可以与一个类“ul#nav.bar”或什至多个类“ul#nav.bar.touch”相结合。

像这样删除选择器之间的空格将它们组合在一起，因此在最后一种情况下，不是在“ul”元素内的 ID 为“nav”的项目内查找具有类“bar”的项目内具有类“touch”的项目，您正在选择一个 ID 为“nav”的“ul”元素以及两个类“bar”和 touch“。像这样的元素 -

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

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

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

通常认为不要对 CSS 选择器过于具体是一种很好的做法，因为它会使您的代码的可重用性大大降低。除非您需要编写“div.widget”，否则只需编写“.widget”，否则您将无法使用其他元素创建“widget”，并且以后在这些情况下覆盖这些属性变得更加困难你可能需要。

总结一下选择器，MDN上有一个很好的 CSS 选择器介绍，Code School（付费课程提供者）也有一个优秀的 CSS 在线基础课程，价格非常合理，将详细介绍选择器。

关于覆盖类，您应该进一步了解两个概念 - 级联顺序和特异性。

给定一个 HTML 片段——

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

以及下面的 CSS-

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

文本的颜色将是黄色而不是蓝色，因为第一个选择器的特异性比第二个更大（更具体）。为了理解这一点，我建议你玩一下特异性计算器，并阅读Smashing Magazine关于该主题的教程。

简而言之，内联样式胜过一切，选择器越具体，它就越有可能被应用来代替其他应用不同属性值的选择器。具有最高特异性得分的选择器中的值“获胜”，但来自具有较低特异性的选择器中不发生冲突的其他属性值也仍将应用于元素。

例如，改变我们之前的 CSS-

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

文本仍然是黄色的，但也会是粗体，因为在选择器中没有给出具有更高特异性的字体粗细属性。

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

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

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

在几乎所有情况下，您都应该在样式表中使用更具体的选择器或选择器的顺序，以便将正确的样式应用于正确的元素，并且绝对不应该常规使用 !important 标志来实现这一点，除非绝对必要。请参阅http://james.padolsey.com/usability/dont-use-important/以获得比我在这里给出的更完整的解释，但它很快变得无法维护（当一切都“重要”时你会做什么）而且它也不是可供希望在其用户代理样式表（浏览器本地）中覆盖您的样式的用户访问，以帮助他们阅读或使用页面（增加字体大小、与背景颜色对比等）

于 2013-03-17T16:25:20.470 回答