Question

CSS选择器中的.class element和element.class之间是否存在差异？

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

Answer 1

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 */
}

Answer 2

“element.class”选择具有给定类的元素。

“。class element”选择具有给定类的任何子元素的所有元素。

示例：

<div class="foo">
    <p>...</p>
</div>

div.foo会选择div，而.foo p会选择子段落。应该注意的是，没有通过“＆gt;”指定直接孩子选择器，这将在寻找孩子时遍历整个文档树。

Answer 3

我喜欢这样想：

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 元素。是一个确切的选择。

Answer 4

非常简单的例子：

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

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

4 个答案: