Co robi selektor * * CSS?

97

Ostatnio natknąłem się * *na CSS .

Odniesienie do witryny - łącze do witryny .

W przypadku pojedynczego *użycia w arkuszu stylów CSS Internet i Stack Overflow są zalewane przykładami, ale nie jestem pewien, czy użyć dwóch * *symboli w CSS.

Przeszukałem go, ale nie mogłem znaleźć żadnych istotnych informacji na ten temat, ponieważ jeden *wybiera wszystkie elementy, ale nie jestem pewien, dlaczego strona użyła go dwukrotnie. Jaka jest brakująca część i dlaczego jest używany ten hack (jeśli jest to hack)?

html css css-selectors swapnesh
źródło

Odpowiedzi:

138

Tak jak zawsze, gdy umieszczasz na przykład dwa selektory jeden po drugim (na przykład li a), otrzymasz kombinator potomków. Tak samo jak * *każdy element będący potomkiem innego elementu - innymi słowy, każdy element, który nie jest elementem głównym całego dokumentu.

Hobbs
źródło
dzięki za odpowiedź ... to jest to, o czym myślałem, ale nie jestem pewien, więc pomyślałem, że zapytam o to społeczność ... wkrótce ją przyjmie +1
zamiana
1
jeszcze tylko jedno pytanie - czy naprawdę warto używać * *? tak jakby rozumiem koncepcję, ale nie
rozumiem
2
@swapnesh wygląda na włamanie do przeglądarki. Jest * { font-size: XXX }zasada i * * { font-size: YYY }zasada. Jedna z nich dotyczy większości przeglądarek, a druga przeglądarek z określonym błędem, chociaż nie mam cierpliwości, aby dowiedzieć się szczegółów. Jest podobny do * htmlhacka, który był powszechnie używany do wykrywania starego IE.
hobbs
dzięki za dodanie ostatniego szczegółowego bloku pod komentarzami .. jest prawie idealny .. nie ma potrzeby robić w tym celu więcej burzy mózgów :)
dziękuję
10
Zauważ, że w sposób * html, * * będzie pasował do elementu html w IE6.
Alohci
80

Mały, duży przykład:

Spróbuj dodać to na swojej stronie:

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

Demo: http://jsfiddle.net/l2aelba/sFSad/

Przykład 2:

Co robi selektor * * CSS?

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

l2aelba
źródło
7
To nie jest do końca odpowiedź, ale cóż za piękna wizualizacja!
aboy021
1
@ l2aelba naprawdę niezłe wyjaśnienie :) +1
swapnesh
33

* *Dopasowuje wszystko oprócz elementu najwyższego poziomu, np html..

Frambot
źródło
Dzięki Joe, przetestowałem to tutaj, a także zgodnie z komentarzami powyżej: * *selektor jest odpowiednikiem html *dla wszystkich przeglądarek oprócz starego dobrego IE6 :-)
Stano
@Stano * *jest odpowiednikiem html *... dla pliku HTML. Ale CSS może być używany do stylizowania innych rodzajów dokumentów (w szczególności SVG).
Sylvain Leroux
11

* oznacza zastosowanie danego stylu do wszystkich elementów.

* *oznacza zastosowanie danego stylu do wszystkich elementów potomnych elementu. Przykład:

body > * {
  margin: 0;
}

Powoduje to zastosowanie stylów marginesów do wszystkich elementów potomnych body. Ta sama droga,

* * {
  margin: 0;
}

odnosi margin: 0się do *„s elementów podrzędnych. Krótko mówiąc, dotyczy margin: 0to prawie każdego elementu.

Generalnie *wystarczy. Nie potrzeba dwóch * *.

CrazyFellow
źródło
2
dzięki za wyjaśnienie +1 .. chociaż nawet ja nie jestem pewien tego, o czym wspomniałeś w ostatnim wierszu "Ogólnie * wystarczy. Nie ma potrzeby * *. Chyba".
zamiana
3
* *Stosuje style do potomnych elementów, a nie elementów podrzędnych. Elementy potomne byłyby takie >jak w twoim przykładzie, a nie przestrzeń. Potomek i dziecko to nie to samo.
BoltClock
7

To powoduje wybranie wszystkich elementów zagnieżdżonych w innym elemencie w taki sam sposób div a, jak zaznaczenie wszystkich <a>elementów zagnieżdżonych gdzieś wewnątrz <div>elementu.

Mike Brant
źródło