".class element"和"element.class"有什么区别？

Question

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

我一直都被展示过,element.class但就在前几天我遇到了一个CSS文件,.class element并且想知道这是否只是一个样式选择(在这种情况下我会让我的更改匹配),或者是否有特定原因(在这种情况下,我不一定要让我的更改匹配).

Answer 1

element.class选择<element />具有该类的所有s..class element选择所有<element />具有该类的元素的后代.

例如,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元素"选择具有给定类的任何子元素的所有元素.

例:

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

div.foo会选择div,同时.foo p会选择子段落.应该注意的是,如果不通过">"选择器指定直接子节点,则在查找子节点时将遍历整个文档树.