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

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:

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