计算CSS特异性的错误

时间:2015-07-06 08:27:16

标签: css

我正在尝试使用CSS。

这是我的代码http://codepen.io/anon/pen/mJxrdE

这里是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>

这里是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]。我不知道发生了什么。

最初,我认为孩子的风格会覆盖父母的风格,但我在这方面得到了相互矛盾的答案。

5 个答案:

答案 0 :(得分:1)

CSS规则适用于选择器指定的特定元素。他们不会以某种方式神奇地触及并影响孩子。但是,某些属性(并非所有属性)都是**继承*,这意味着在没有任何特定样式的情况下,属性值将从父级获取。 color是一个这样的继承属性。

您的棕色规则适用于#first元素,但不适用于儿童。 子项可能使用父颜色设置样式,因为颜色是继承的属性,但在这种情况下,您直接设置了它们的样式,因此不会发生继承。

为了澄清,id选择器的高特异性确实几乎可以保证#first元素是棕色的(假设没有其他规则{{1 }}, 例如)。但这种高度特异性与计算儿童级联结果无关。孩子们找到自己的风格,只有在他们没有自己的风格时才继承父母的风格。换句话说,父选择器的高特异性不会使其向下继承&#34;更强&#34;这会覆盖孩子的设置。继承既不强大,也不脆弱,也不重要。它只是在子属性具有值!important时发生的行为(默认情况下,例如inherit或显式)。

答案 1 :(得分:0)

您使用类选择器定位特定元素,因此会覆盖级联。

为了更好地了解具体的元素。

#first .spinach {
  color: brown;
}

http://codepen.io/stenmuchow/pen/rVdMjR

答案 2 :(得分:0)

您还将样式应用于<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function () { var places = new google.maps.places.Autocomplete(document.getElementById('txt_DestinationRoute')); google.maps.event.addListener(places, 'place_changed', function () { var place = places.getPlace(); var address = place.formatted_address; var latitude = place.geometry.location.A; var longitude = place.geometry.location.F; var mesg = "Address: " + address; mesg += "\nLatitude: " + latitude; mesg += "\nLongitude: " + longitude; //document.getElementById('lat').innerHTML = latitude; //document.getElementById('log').innerHTML = longitude; alert(mesg); }); }); </script> p#first.carrot)的孩子。如果您希望第一行的所有内容都是棕色的,您可以这样:

.spinach

而这只是解决问题的一种方式。

答案 3 :(得分:0)

喜欢喜欢,id比类更具体。因此,如果你在同一个元素上有一个id和一个类,那么id将会#34; win&#34;。

但是,在您的示例中,胡萝卜和菠菜类更具体,因为它们直接引用strong元素

如果你考虑一下,id比css中的class更具体,因为可能有许多具有相同类的元素,但只有一个具有该id。对于子元素而言,这并不适用,您的代码就是一个很好的例子。当您使用类直接设置元素样式时,这比通过id设置其祖先样式更具体。

答案 4 :(得分:0)

如果我们一步一步地看一下,CSS首先将棕色应用于整个div,然后进入div并找到carrot类。

它应用相应的css,即使它位于用另一种颜色定义的块内。

#选择器优先于.选择器的含义:

如果你使用div说:

<div class="carrot" id="first">Something</div>

现在CSS将优先考虑#选择器并将其设为棕色。

这就是CSS的工作原理..

由于carrot是一个孩子并没有任何其他ID,因此它优先于其父级并且应用了#个选择器 默认情况下它会被继承,但由于你定义了一个类并改变了它的颜色,它会采用指定的颜色而不是父颜色。