我正在尝试使用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]。我不知道发生了什么。
最初,我认为孩子的风格会覆盖父母的风格,但我在这方面得到了相互矛盾的答案。
答案 0 :(得分:1)
CSS规则适用于选择器指定的特定元素。他们不会以某种方式神奇地触及并影响孩子。但是,某些属性(并非所有属性)都是**继承*,这意味着在没有任何特定样式的情况下,属性值将从父级获取。 color
是一个这样的继承属性。
您的棕色规则适用于#first
元素,但不适用于儿童。
子项可能使用父颜色设置样式,因为颜色是继承的属性,但在这种情况下,您直接设置了它们的样式,因此不会发生继承。
为了澄清,id选择器的高特异性确实几乎可以保证#first
元素是棕色的(假设没有其他规则{{1 }}, 例如)。但这种高度特异性与计算儿童级联结果无关。孩子们找到自己的风格,只有在他们没有自己的风格时才继承父母的风格。换句话说,父选择器的高特异性不会使其向下继承&#34;更强&#34;这会覆盖孩子的设置。继承既不强大,也不脆弱,也不重要。它只是在子属性具有值!important
时发生的行为(默认情况下,例如inherit
或显式)。
答案 1 :(得分:0)
您使用类选择器定位特定元素,因此会覆盖级联。
为了更好地了解具体的元素。
#first .spinach {
color: brown;
}
答案 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,因此它优先于其父级并且应用了#
个选择器
默认情况下它会被继承,但由于你定义了一个类并改变了它的颜色,它会采用指定的颜色而不是父颜色。