Что делает селектор * * 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:

Демо: 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>элемента.

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