CSS选择器中的.class element
和element.class
之间是否存在差异?
我总是被element.class
看到,但就在前几天遇到了.class element
的CSS文件并且想知道这是否只是一种风格选择(在这种情况下我会做出来)我的更改匹配),或者是否有特定原因(在这种情况下,我不一定要让我的更改匹配)。
答案 0 :(得分:56)
element.class
选择该类的所有<element />
。 .class element
选择所有<element />
s,它们是具有该类的元素的后代。
例如,HTML:
<div class='wrapper'>
<div class='content'></div>
<div></div>
<div class='footer'></div>
</div>
例如,CSS:
div.wrapper {
background-color: white; /* the div with wrapper class will be white */
}
.wrapper div {
background-color: red; /* all 3 child divs of wrapper will be red */
}
答案 1 :(得分:11)
“element.class”选择具有给定类的元素。
“。class element”选择具有给定类的任何子元素的所有元素。
示例:
<div class="foo">
<p>...</p>
</div>
div.foo
会选择div,而.foo p
会选择子段落。应该注意的是,没有通过“&gt;”指定直接孩子选择器,这将在寻找孩子时遍历整个文档树。
答案 2 :(得分:0)
我喜欢这样想:
1) a, b = a OR b
2) a b = a AND b (on that order)
3) a.b = a.b (on that order)
2,3) a b 与 b a 不同。
2)同时属于 a 和 b 的元素,即 或 b 元素。是范围选择。
3) b 类的 a 元素。是一个确切的选择。
答案 3 :(得分:-2)
非常简单的例子:
HTML:
<ul class="a">
<li>1</li>
<li class="a">2</li>
<li>3</li>
</ul>
CSS:
.a li{color:blue;}
li.a{color:red;}