В чем разница между ".class element" и "element.class"?

Есть ли разница между .class element и element.class в селекторе CSS? Мне всегда показывали element.class, но на днях наткнулся на CSS файл на работе с .class element и хотел узнать, был ли это только выбор стиля (в этом случае я бы сделал мои изменения), или если была конкретная причина (в этом случае я бы не хотел, чтобы мои изменения совпадали).

Ответ 1

element.class выбирает все <element /> с этим классом. .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 */
}

Ответ 2

"element.class" выбирает элементы, которые имеют данный класс.

". class element" выбирает все элементы, которые являются дочерними элементами чего-либо с данным классом.

Пример:

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

div.foo будет выбирать div, а .foo p будет выбирать дочерний абзац. Следует отметить, что без указания прямого дочернего элемента с помощью селектора " > " это будет перемещаться по всему дереву документа при поиске детей.

Ответ 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 одновременно, т.е. Не a или b. Выбор диапазона.
3) a элементы класса b. Является точным выбором.

Ответ 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;}