Что делает селектор * * CSS?

97

Недавно наткнулся * *на CSS .

Ссылка на сайт - Ссылка на сайт .

Для однократного *использования в таблице стилей CSS Интернет и переполнение стека наводнены примерами, но я не уверен, что использовать два * *символа в CSS.

Я погуглил, но не смог найти никакой соответствующей информации об этом, так как один *выбирает все элементы, но я не уверен, почему сайт использовал его дважды. Чего здесь не хватает и почему используется этот хак (если это хак)?

html css css-selectors свопнешь
источник

Ответы:

138

Как и в любой другой раз, когда вы помещаете два селектора один за другим (например li a), вы получаете комбинатор потомков. То * *же самое с любым элементом, который является потомком любого другого элемента - другими словами, любого элемента, который не является корневым элементом всего документа.

Hobbs
источник
спасибо за ответ .. это то, о чем я думал, но не уверен, поэтому думал спросить у сообщества .. скоро приму это +1
swapnesh
1
Еще один вопрос - действительно ли уместно использовать * *? как
будто
2
@swapnesh похоже на взлом браузера. Есть * { font-size: XXX }правило и * * { font-size: YYY }правило. Один из них применим к большинству браузеров, а другой - к браузерам с определенной ошибкой, хотя у меня нет терпения разбираться в деталях. Это похоже на * htmlвзлом, который обычно использовался для обнаружения старого IE.
hobbs
спасибо за добавление последнего подробного блока под комментариями .. он почти идеальный .. не нужно проводить больше мозговых штурмов для этого :)
спасибо
10
Обратите внимание, что таким образом * html, * * будет соответствовать элементу html в IE6.
Alohci
80

Просто маленький большой пример:

Попробуйте добавить это на свой сайт:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

Демо: http://jsfiddle.net/l2aelba/sFSad/

Пример 2:

Что делает селектор * * CSS?

Демо: http://jsfiddle.net/l2aelba/sFSad/34/

l2aelba
источник
7
Это не совсем ответ, но какая прекрасная визуализация!
aboy021
1
@ l2aelba действительно хорошее объяснение :) +1
swapnesh
33

* *Соответствует всему, кроме элемента верхнего уровня, например html.

Frambot
источник
Спасибо, Джо, протестировал его здесь, а также в соответствии с комментариями выше: * *селектор эквивалентен html *для всех браузеров, кроме старого доброго IE6 :-)
Stano
@Stano * *эквивалентно html *... для файла HTML. Но CSS можно использовать для стилизации других документов (в частности, SVG).
Sylvain Leroux
11

* означает применение заданных стилей ко всем элементам.

* *означает применение заданных стилей ко всем дочерним элементам элемента. Пример:

body > * {
  margin: 0;
}

Это применяет стили полей ко всем дочерним элементам body. Так же,

* * {
  margin: 0;
}

применяется margin: 0к *дочерним элементам. Короче говоря, это применимо margin: 0практически ко всем элементам.

В общем, *достаточно одного . Два не нужны * *.

CrazyFellow
источник
2
спасибо за объяснение +1 .. хотя даже я не уверен в том, что вы только что упомянули в последней строке: «Как правило, * достаточно. Нет необходимости в * *. Я думаю».
swapnesh
3
* *применяет стили для потомков элементов, а не дочерние элементы. Дочерние элементы будут такими же, >как в вашем примере, а не пробелом. Потомок и ребенок - это не одно и то же.
BoltClock
7

Это выбирает все элементы, вложенные в другой элемент, почти так же, как div aи все <a>элементы, вложенные где-то внутри <div>элемента.

Майк Брант
источник