“.class element”和“element.class”有什么区别?

时间:2011-05-16 21:04:55

标签: css

CSS选择器中的.class elementelement.class之间是否存在差异?

我总是被element.class看到,但就在前几天遇到了.class element的CSS文件并且想知道这是否只是一种风格选择(在这种情况下我会做出来)我的更改匹配),或者是否有特定原因(在这种情况下,我不一定要让我的更改匹配)。

4 个答案:

答案 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;}