Selektory CSS

Selektory CSS

Selektory CSS są używane do 'wyszukiwania' (lub wybierania) HTML elementów do ustawienia ich stylu.

Możemy podzielić selektory CSS na pięć kategorii:

Ta strona wyjaśni podstawowe selektory CSS.

CSS元素选择器

Wybieracz elementu wybiera HTML elementy na podstawie nazwy elementu.

Przykład

W tym przypadku, wszystkie elementy <p> na stronie będą wyśrodkowane i mają kolor tekstu czerwony:

p {
  text-align: center;
  color: red;
}

Spróbuj sam!

CSS wybieracz id

Wybieracz id używa atrybutu id elementu HTML do wyboru określonego elementu.

Id elementu jest unikalne na stronie, więc wybieracz id jest używany do wyboru unikalnego elementu!

Aby wybrać element o określonym id, napisz znak hash (#) po którym następuje id elementu.

Przykład

To reguła CSS zostanie zastosowana do elementu HTML o id="para1":

#para1 {
  text-align: center;
  color: red;
}

Spróbuj sam!

Uwaga:Nazwa id nie może zaczynać się od liczby.

CSS wybieracz klasowy

Wybieracz klasowy wybiera HTML elementy o określonej klasie.

Aby wybrać element o określonej klasie, napisz znak kropki (.) po którym następuje nazwa klasy.

Przykład

W tym przykładzie, wszystkie elementy HTML z klasą class="center" będą czerwone i wyśrodkowane:

.center {
  text-align: center;
  color: red;
}

Spróbuj sam!

Możesz również指定, że tylko określone elementy HTML będą miały wpływ na klasę.

Przykład

W tym przykładzie, tylko elementy <p> o klasie class="center" będą wyśrodkowane:

p.center {
  text-align: center;
  color: red;
}

Spróbuj sam!

Elementy HTML mogą również odnosić się do wielu klas.

Przykład

W tym przykładzie, element <p> będzie ustawiony według klas class="center" i class="large":

<p class="center large">Ten akapit odnosi się do dwóch klas.</p>

Spróbuj sam!

Uwaga:Nazwa klasy nie może zaczynać się od liczby!

CSS uniwersalny wybieracz

Uniwersalny wybieracz (*) wybiera wszystkie elementy HTML na stronie.

Przykład

Poniższe reguły CSS wpłyną na każdy element HTML na stronie:

* {
  text-align: center;
  color: blue;
}

Spróbuj sam!

CSS grupujący wybieracz

Grupujący wybieracz wybiera wszystkie HTML elementy o tych samych definicjach stylu.

Zobacz poniższy kod CSS (elementy h1, h2 i p mają te same definicje stylu):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Najlepiej grupować wybieracze, aby jak najbardziej skrócić kod.

Aby grupować wybieracze, użyj przecinka, aby oddzielić każdy wybieracz.

Przykład

W tym przykładzie, grupujemy powyższe wybieracze:

h1, h2, p {
  text-align: center;
  color: red;
}

Spróbuj sam!

Wszystkie proste wybieracze CSS

Wybieracz Przykład Opis przykładowy
.class .intro Wybierz wszystkie elementy o klasie "intro".
#id #firstname 选取id="firstname"的那个元素。
* * 选取所有元素。
element p 选取所有<p>元素。
element,element,.. div, p 选取所有<div>元素和所有<p>元素。

延伸阅读

课外书：CSS元素选择器

课外书：CSS选择器分组

课外书：CSS类选择器详解

课外书：CSS ID选择器详解

课外书：CSS属性选择器详解

课外书：CSS后代选择器

课外书：CSS子元素选择器

课外书：CSS相邻兄弟选择器