问在CSS中重写类

EN

除了“.over”，您在所有内容上都是正确的。表示一个类。"#“代表ID。但是是的，你已经把这个概念写下来了。

另外，如果您想像标题所说的那样“重写”，您将添加

!important 

直到任何规则结束时，您都希望优先于其他规则。

您可以通过给予！重要或您可以提供内联风格的css。内联css的优先级高于外部css。

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

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

"#nav li ul a span“是一个子代选择器，正如您说的那样，它将选择每个父级的子元素(在任何级别上)，因此"#nav li”选择ID为"nav“的项中包含的"li”元素--甚至向下几个级别。

如果要选择父项的直接子项，则可以使用">“符号。也就是说，"#nav > li“将选择直接位于ID为"nav”的任何项下的li元素，但不选择任何为该元素的子元素的li元素，也不包括该元素之下的任何li元素。

顺便说一句，"#nav“与"*#nav”完全等价，因为它选择了任何带有ID的元素，如果只想选择带有ID的ul元素，也可以编写"ul#nav“，这反过来可以与类"ul#nav.bar”甚至多个类"ul#nav.bar.touch“结合使用。

移除这样的选择器之间的空格，因此在最后一种情况下，您选择的是一个ID "nav“在"ul”元素中的项，而不是在带有ID "ul“元素的项中查找类”触摸“的项，而是选择一个ID为"nav”的“ul”元素，并且选择两个类"bar“和touch。

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

还可以使用属性选择器，因此如果您想选择将在新窗口中打开的链接，您可以使用"atarget=_blank“(它既基于属性的存在又基于值的存在进行选择)，或者如果您希望选择与的链接--您可以使用"ahref”。这只需选择具有此属性的所有元素。

在此基础上，您甚至可以选择相邻(相邻)另一个元素的项，如果您想直接选择图像后面的所有段落，则可以在选择器中使用"img + p“，或者如果您想直接选择段落后面的图像，则使用"p + img”。与往常一样，选择器中的最后一项是应用样式的项。

它通常被认为是一个很好的实践，不要对CSS选择器过于具体，因为它使您的代码更少可重用。除非您需要编写"div.widget“，否则只需编写".widget”，否则您将无法使用其他元素创建“小部件”，而且在以后可能需要重写这些属性时，这会使重写这些属性变得更加困难。

结束选择器，有一个很好的介绍CSS选择器在MDN和代码学校(付费课程提供者)也有一个很好的在线基础课程，可提供一个非常合理的价格，将通过选择器在一些细节。

关于重写类，您应该进一步理解两个概念--级联顺序和具体性。

给出一个HTML片段

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

下面的CSS-

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

文本的颜色将是黄色的，而不是蓝色的，因为第一个选择器的特异性大于第二个选择器。为了理解这一点，我建议你和特异性计算器一起玩一出，并阅读一下关于这个主题的粉碎杂志教程。

总之，内联样式压倒一切，选择器越具体，它就越有可能被应用于其他选择器，否则就会应用不同的属性值。具有最高特异性分数的选择器中的值“胜诉”，但其他属性值，即不冲突的低特异性选择器的属性值，仍将应用于该元素。

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

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

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

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

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

在本例中，我们的文本现在是蓝色的，因为第二条规则稍后在样式表中显示为，因此重写了第一个规则。如果您有多个样式表，那么最后一个样式表中出现在文档头中的规则将以相同的特异性覆盖规则。

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