Question

以下是我正在努力理解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>

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

在涉及继承之前，特异性可以正常工作。如果是孩子 element具有与父样式不同或冲突的样式，孩子的风格总是赢。因此对于上面的strong元素，我们看到的是继承而不是特异性。

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

我的问题是，因为<p>是<section>的孩子，所以根据上面的陈述，不应该在这里观察继承，就像用<strong>元素观察到的那样？

Answer 1

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

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

对于#mainContent p { ... }，主题是所有p元素，这些元素位于ID为mainContent的元素内。

如果p元素位于ID为mainContent的元素内，则#mainContent p { ... }规则会获胜，因为它是更具有特定的规则。

strong元素不是任一规则的主题，因此不能直接应用。

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

那么继承在哪里？

属性到元素的继承可以通过两种方式之一进行。

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

或者，如果级联中的任何位置都没有给定strong元素定义了特定属性的规则，则该元素将采用默认值。一些属性被定义为＆＃34;继承＆＃34;而其他人则不然。 color属性定义为继承。

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

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

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

1 个答案: