Co robi gwiazdka (*) w selektorze CSS?

98

Znalazłem ten kod CSS i uruchomiłem go, aby zobaczyć, co robi, i nakreślił KAŻDY element na stronie,

Czy ktoś może wyjaśnić, co robi Asterisk * w CSS?

<style>
* { 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 }
</style>
css css-selectors JasonDavis
źródło
@jasondavis - To pytanie dotyczy Twojego kodu lub po prostu zadałbym nowe pytanie. Czy Twoja strona wyświetla wiele konturów w różnych kolorach? Jedynym sposobem, w jaki mogę uzyskać różne kolory w ten sposób, jest określenie tagu, a następnie * IE div * { outline ...}i * { outline ... }. Jeśli używam * { outline ... }i używany jest * * { outline ... }tylko ostatni opis CSS.
JabberwockyDecompiler

Odpowiedzi:

95

Jest to symbol wieloznaczny, co oznacza, że ​​wybierze wszystkie elementy w tej części DOM.

Na przykład, jeśli chcę zastosować margines do każdego elementu na całej mojej stronie, możesz użyć:

* {
    margin: 10px;
}

Możesz również użyć tego w ramach selekcji podrzędnych, na przykład poniższe dodałyby margines do wszystkich elementów w znaczniku akapitu:

p * {
    margin: 10px;
}

Twój przykład robi pewne sztuczki CSS, aby zastosować kolejne obramowania i marginesy do elementów, aby nadać im wiele kolorowych obramowań. Na przykład biała ramka otoczona czarną ramką.

Soviut
źródło
Jaka jest zaleta używania p *w przeciwieństwie do zwykłego używania p?
Solomon Closson,
7
Nie ma żadnej „przewagi”, po prostu zaznaczasz wszystkie elementy podrzędne wewnątrz ptagu. Więc jeśli miał span, b, strong, img, itd. Wewnątrz ust, to wybierz te i zastosować style do nich.
Soviut,
30

Kod CSS, do którego się odnosisz, jest bardzo przydatny dla projektanta stron internetowych przy debugowaniu problemów z układem strony. Często umieszczam go tymczasowo na stronie, aby zobaczyć rozmiar wszystkich elementów strony i wyśledzić, na przykład ten, który ma zbyt duże wypełnienie, co powoduje, że inne elementy nie są na miejscu.

Tę samą sztuczkę można zrobić tylko z pierwszą linią, ale zaletą definiowania wielu konturów jest to, że poprzez kolor obramowania uzyskuje się wizualną wskazówkę dotyczącą hierarchii zagnieżdżonych elementów strony.

Tomek
źródło
2
Chociaż obecnie wbudowane inspektory przeglądarki są znacznie bardziej skuteczne, prawda? Lub za pomocą firebuga.
Lawrence Dol
@SoftwareMonkey - Tak, w dzisiejszych czasach to prawda. Wbudowani inspektorzy są świetni. Na przykład używam Chrome i robięCtrl+Shift+c następnie najeżdżam kursorem na element, a Chrome koloruje tło. O wiele szybciej niż wrzucenie tego stylu gwiazdki do CSS.
Tom
1
Choć odpowiedź Soviutanta jest prawdziwa, to należało ją oznaczyć jako poprawną, bo to jest dokładna odpowiedź na zadane pytanie.
Billy Samuel
4

* jest symbolem wieloznacznym. Oznacza to, że zastosuje styl do dowolnego elementu HTML. Dodatkowe * przypisują styl do odpowiedniego poziomu zagnieżdżenia.

Ten selektor zastosuje różne kolorowe kontury do wszystkich elementów strony, w zależności od poziomu zagnieżdżenia elementów.

futureelite7
źródło
4

* działa jak symbol wieloznaczny, tak jak w większości innych przypadków.

Jeśli zrobisz:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

Wtedy wszystkie elementy HTML będą miały te style.

Mike Trpcic
źródło
0

w swoim arkuszu stylów zwykle musisz zdefiniować podstawową regułę dla wszystkich elementów, takich jak atrybut rozmiaru czcionki i marginesy. {font-size: 14px; margines: 0; padding: 0;} / overide domyślne ustawienie przeglądarki dla elementów, cały rozmiar czcionki tekstu będzie renderowany jako rozmiar 14 pikseli z zerowym marginesem i dopełnieniem, w tym h1, ... pre. * /

Mikel Bradley Benjamin
źródło