CSS中的继承性和特异性之间的混淆答案

【问题标题】：Confusion between inheritance and specificity in CSSCSS中的继承性和特异性之间的混淆
【发布时间】：2016-05-23 03:11:33
【问题描述】：

以下是我正在努力了解 CSS 中这两个规则之间差异的 html 文件。

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>specificity</title>
  <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <style>
    aside,
    article,
    section,
    header,
    footer,
    nav {
      display: block;
    }
    body {
      font-family: Georgia;
      font-size: 120%;
    }
    /*add styles here*/
    #mainContent p {
      color: red;
    }
    p {
      color: blue;
    }
    .green {
      color: green;
    }
    /**/
  </style>
</head>

<body>
  <section id="mainContent">
    <p>I am a paragraph nested inside a section. I also have a <strong class="green">strong tag</strong> nested inside of me.</p>
  </section>
</body>

</html>

以下是我不太清楚的陈述：

在涉及继承之前，特异性工作得很好。如果一个孩子元素的样式与父样式不同或冲突，孩子的风格总是赢。所以对于上面的strong 元素，我们看到的是继承而不是特异性。

但是，如果我将 green 类应用于 <p> 元素，我会观察到特异性，因为绿色样式被忽略并且带有 id 的样式应用于段落。

我的问题是，既然<p> 是<section> 的孩子，难道不应该根据上面的陈述在这里观察到继承，就像用<strong> 元素观察到的一样？

【问题讨论】：

在您的示例中，<strong> 元素的颜色不是来自继承。这句话出自哪里？
它来自我在 Lynda 上的一门课程。
在涉及继承之前，特异性工作得很好。 - 这句话似乎是错误的@Kiran。如果我的英语水平不错，应该是相反的：P
我认为这是正确的说法。由于 元素的颜色更改为绿色，因为它是部分的子元素，并且子规则在继承中获胜。此处的特异性不适用于此元素。
特异性是应用于您的strong 元素的一种。它是绿色的，因为您已将绿色类分配给 strong 元素（特别是该元素）。如果它继承了父级的样式，它的颜色应该是红色而不是绿色。

标签： html css inheritance

【解决方案1】：

每条 CSS 规则仅适用于其选择器的主题。

对于p { ... }，主题是所有p元素

对于#mainContent p { ... }，subject 是 ID 为 mainContent 的元素内的所有 p 元素。

如果 p 元素在 ID 为 mainContent 的元素内，则 #mainContent p { ... } 规则获胜，因为它是一个更具体的规则。

strong 元素不是任一规则的主题，因此两者均不直接适用。

在示例中，strong 元素是.green { ... } 规则的主题。这就是适用于该元素的规则。

那么继承从何而来？

将属性继承到元素可以通过以下两种方式之一发生。

首先，可以有一个明确的规则，其subject 是元素，属性设置是inherit。因此，如果 strong { color:inherit; } 是 strong 元素级联中具有 color 属性的最高优先级规则，则强制该元素的颜色取自其父元素的颜色。

或者，如果级联中没有任何规则为给定的strong 元素定义了特定属性，则该元素将采用默认值。一些属性被定义为“继承”，而另一些则不是。 color 属性被定义为继承。

因此，在这种替代情况下，只有当没有规则的 subject 是给定元素并且具有color 属性时，该给定元素的颜色才会从颜色继承的包含元素。

在你的例子中。有多个规则，其中 p 元素是主题并且定义了 color 元素，因此没有继承对其有效。

【讨论】：