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

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