计算CSS特异性的错误 [英] Mistake in Calculating Specificity for CSS
问题描述
我想尝试使用CSS。
这是我的代码 http://codepen.io/anon/pen/mJxrdE
这里是html
< html>
< head>
< meta charset =UTF-8>
< title>示例文档< / title>
< link rel =stylesheethref =style1.css>
< / head>
< body>
< p id =first>
< strong class =carrot> C< / strong> ascading
< strong class =spinach> S< / strong> tyle
< strong class = spinach> S< / strong> heets
< / p>
< p id =second>
< strong> C< / strong> ascading
< strong> S< / strong> tyle
< strong> S< / strong> heets
< / p ;
< / body>
< / html>
这里是CSS
p {color：blue; }
strong {color：red; text-decoration：underline;}
.carrot {color：orange;}
.spinach {color：green;}
#first {font -style：italic; color：brown;}
#second {color：blue;}
我不明白为什么第一行不是完全棕色。我认为id（#first）比类（.carrot）有更多的优先级。
我尝试从 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
。所以.carrot有[0,0,1,0]，#first有[0,1,0,0]。我不知道发生了什么。
最初，我认为子类型会覆盖父类型，但是我得到了相互冲突的答案。
CSS规则适用于选择器指定的特定元素。他们不以某种方式神奇地达到和影响儿童。然而，一些属性（不是所有）是** inherited *，意味着在没有任何特定样式的情况下，属性值将从父级获取。 color 是一个这样的继承属性。
您的棕色规则适用于 #first 元素，但不适用于孩子。
子元素可能使用父元素样式，因为颜色是继承属性，但在这种情况下，您已直接为它们设置样式，因此没有继承
#first code>元素将是棕色的（例如，假设没有其他规则与！important ）。但是高度的特异性与计算级联对孩子的结果无关。孩子们找到自己的风格，并继承父风格的颜色，只有当他们没有自己的。换句话说，对父选择器的高度特异性不会使它的向下继承更强，这样将覆盖子对象的设置。继承既不强，也不弱，也不重要。这只是一个行为，当一个子属性的值 inherit （默认情况下，例如 color ，或明确）。
I'm trying to experiment with CSS.
Here's my code http://codepen.io/anon/pen/mJxrdE
Here's the html
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p id="first">
<strong class="carrot">C</strong>ascading
<strong class="spinach">S</strong>tyle
<strong class="spinach">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
Here's the CSS
p {color: blue; }
strong {color : red;text-decoration: underline;}
.carrot {color:orange;}
.spinach {color:green;}
#first {font-style:italic;color:brown;}
#second {color:blue;}
I'm not understanding why the first line is not completely brown. I thought id (#first) have more precedence than classes (.carrot).
I tried calculating the specificity from http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
. So .carrot has [0,0,1,0] and #first has [0,1,0,0]. I'm not sure what's going on.
Originally, I thought child styles override parent styles but I'm getting conflicting answers on that.
解决方案 CSS rules apply to the specific elements specified by the selectors. They do not somehow magically reach down and affect children. However, some properties (not all) are **inherited*, meaning that in the absence of any specific styling, the property value will be taken from the parent. color is one such inherited property.
Your brown rule applies to the #first element, but not to children.
The children might be styled with the parent color, since color is an inherited property, but in this case, you've styled them directly, so no inheritance happens.
To clarify, the high specificity of the id selector does pretty much guarantee that the #first element will be brown (assuming there's no other rule with an !important, for example). But that high specificity has nothing to do with computing the result of the cascade on the children. The children find their own style, and inherit the parent style for color only if they have none of their own. To put it a different way, a high specificity on the parent selector does not make its downward inheritance "stronger" such that would override a setting on a child. Inheritance is neither strong, nor weak, nor important. It's just a behavior that takes place when a child property has the value inherit (by default, such as is the case with color, or explicitly).
这篇关于计算CSS特异性的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
