我想弄清楚为什么"第一项"在下面没有显示为橙色.根据特异性规则,选择器.one.two应具有20的特异性分数(两个类)..one li应该有11个(一个类,一个元素).所以它感觉它应该显示为橙色,而不是蓝色.
知道为什么不呢？
此外,作为一个侧面的问题,我为什么不能有之间的空间.one和.two在.one.two选择？这似乎适用于Chrome,但不是这里.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.two {
color: green;
}
.one li {
color: blue;
}
.one.two {
color: orange;
}
</style>
</head>
<body>
<div>
<ul class="one two">
<li>Item One</li>
</ul>
</div>
</body>
</html>所以它感觉它应该显示为橙色,而不是蓝色.
知道为什么不呢？
你ul 是橙色的.但是,您li的颜色为蓝色,与其父颜色无关,因为您已明确定位并为其应用了颜色.如果覆盖隐式,它将不会继承其父级的颜色color: inherit.
为什么我不能在.one.two选择器中的.one和.two之间留一个空格？
因为那是一个完全不同的选择器..one .two匹配.two 内部 a .one..one.two(没有空格)匹配一个.one和的元素.two.
<div class="one">
<div class="two"></div> /* matched by .one .two */
</div>
<div class="one two"></div> /* matched by .one.two */