2

我不知道这种技术叫什么，我只见过它使用过。这是一种使用 CSS 重新利用相同选择器的方法。

例如，如果我创建

 h1  { 
      font-size:18px; 
      color:#FFFFFF; 
      font-family:Arial, Helvetica;margin:0;
      padding:0;
}

h2  { 
          font-size:18px; color:#000000; 
          font-family:Arial, Helvetica; 
          font-weight:normal;margin:0;
          padding:0;
}

我可以用类似的东西重新调整 h 选择器的用途

.whatever h1 {
    color: #000; 
    font: 2.0em arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 50px 0px 0px 50px; 
}

.whatever h2 {
    color: #000; 
    font: 1.7em bold arial, sans-serif; 
    background-color: #fff3ea; 
    margin: 25px 0px 25px 75px;
}

如果h1和h2出现在一个div被调用的东西中，那么它们将假定这些属性。您可以使用 ID 标签和类标签来做到这一点，但我一辈子都不记得这是如何做到的。

有什么想法吗？

4

2 回答 2

4

这称为特异性。

这是 CSS 的一个关键特性，这意味着更具体的选择器 ( .whatever h1) 中的属性将覆盖不太具体的选择器 ( ) 中的属性h1。它允许您为页面上的大多数元素（例如所有h1元素）设置一般样式，然后使用更具体的选择器更改这些元素的一小部分的属性，例如，仅标识h1另一个元素中的元素谁的班级是whatever：

HTML

<h1>I'm green with envy</h1>

<h1>And so am I</h1>

<div class="whatever">
    <h1>Because I'm rather special</h1>
</div>

CSS

h1{
    color: green;
}

.whatever h1{
    color: blue;
}

结果

更具体的选择器的结果

CSS 选择器的.whatever h1意思是“h1在另一个元素中的任何元素，具有任何类”。你也可以给h1元素一个自己的类来达到同样的效果；h1您只需稍微不同地编写 CSS 以反映您所定位的元素现在具有自己的类的事实：

HTML

<h1 class="whatever">I'm special</h1>

CSS

h1.whatever{
    color: blue;
}

始终尝试为您的类和 ID 提供有意义的名称，以引用元素在页面中的角色，而不是其颜色或其他属性。即使用“.introduction”而不是“.bigredtext”或“.whatever”要好得多。这样，如果您将介绍文本的颜色更改为亮蓝色，则不必在 CSS 和 HTML 中重命名该类，并且 HTML 中的所有内容也会更好地阅读。（这就是人们在提到“语义”和“语义命名约定”时所谈论的内容。）

如何确定特异性（要记住的简单规则）

用户代理（Web 浏览器）使用一个公式来计算每个选择器的具体程度以及哪个应该优先于另一个。用非常简单的术语来说，从不太具体到更具体：

  • 只有元素名称的选择器（例如h1）是最不具体的
  • 带有 a.class的选择器比没有类的选择器更具体
  • 带有 a的选择#id器比带有 a 的选择器更具体.class
  • 样式表中较低的选择器优先于早期相同的选择器

这些是关于特异性值得学习的四个主要规则，它们将涵盖大多数简单的用例。这两个附加规则与特异性无关，但也值得了解：

  • 例如，内联样式<h1 style="color: blue">将优先于在外部样式表或内部<style>标记中单独声明的外部规则。您可能不应该使用内联样式，但值得知道这一点以防万一您遇到它们。
  • 选择器中使用!important标志“胜过”所有内容且不能被否决的属性。同样，您可能不应该选择使用!important标志，但有时您可能会被迫这样做。

如何真正确定特异性（如何精确计算）

当然，当您开始将类、ID 和元素链接在一起时，它会比上面的要复杂一些（但不会复杂得多），这就是为什么学习如何精确计算特异性而不是仅仅依靠直觉会很有帮助的原因，因为当您的样式表变得更大更复杂时，它将为您节省大量时间。

如果您想了解更多信息，Smashing Magazine 有一篇题为“CSS Specificity and Inheritance”的文章值得一看。他们参考了 Andy Clarke 著名的《星球大战图表》，如果您熟悉《星球大战》，这可能是一种更简单的可视化特异性的方法，但如果您不熟悉，它可能只会让事情变得更加混乱！（点击下面的图片在安迪的网站上阅读更多内容。）

安迪克拉克的星球大战图表

于 2012-09-21T15:08:48.863 回答
0

您面临覆盖选择器的问题。

例子：

<div class="one">
     <div id="two">
          <h1> This is H1 text </h1>
     </div>
</div>

因此您已通过以下方式将 H1 设置为 FFF - 白色：

h1 {
   color:#fff;
}

现在我们首先覆盖（使用 ID ）：

div#two h1 {
   color:#888;
}

第三，注意你不必放置当前元素，你可以为给定类的每个元素设置它：

.one div#two h1 {
   color:#000;
}

所以最后我们有黑色的文字颜色。

原始的是设置“全局”样式。嵌套的是为给定元素提供 exac 样式。

您也可以使用链接类/id 选择器，因为<div id="one" class="two three four">您可以使用div#one.two.three.four- 不带空格来选择它

于 2012-09-21T15:01:44.627 回答