Question

在这段代码中，我的段落看起来像这样

<p class="special">
    This is just a test. <em>what color here</em> inheritance work
</p>

我想知道为什么不是字符串“这里用什么颜色”从父p元素中获取颜色。我的意思是特殊类具有10的特异性值，并且诸如em的类型具有1的特异性值，因此这里10大于1。

所以我的意思是颜色应该来自选择器.special

这是标记和css

<!DOCTYPE html>
<html>
    <head>
       <meta name="keyword" content="html5. tutorial" charset=utf-8" />
       <title></title>
       <style type="text/css" media="screen">
          em
          {
             font-weight:bold;
             color:red;
           }

          .special
          {
              color:blue;
           }
       </style>
    </head>
    <body>
       <p class="special">
          This is just a test. Is this color <em>red</em> inheriatance work
       </p>
   </body>
</html>

//托尼

Answer 1

是.special内部的一个单独元素，因此它有自己的特异性细分。如果代码为，则类特异性将适用于。

Answer 2

这与特异性无关。当两个或多个样式规则适用于相同的元素时，特异性适用。

在这里，你只有一个段落（蓝色），恰好包含一个em元素（红色）。

Answer 3

.special未选择（选择器不匹配）。 em选择器与匹配并应用其属性，因此为红色。

如果选择器不存在或不匹配，em的颜色会显示为蓝色的原因是Inheritance和color is an inherited property这一事实

例如：

http://jsfiddle.net/kFvvX/ - 非继承属性不会将属性应用于后代
http://jsfiddle.net/kFvvX/1/ - 您可以选择继承此属性
http://jsfiddle.net/kFvvX/2/ - 您也可以设置该属性;由于匹配父项的选择器与子项不匹配，因此不需要覆盖。

关于特异性

3 个答案: