Wybieranie elementów CSS

Wybieranie elementów CSS

Najbardziej powszechnym wybieraczem CSS jest wybieracz elementów. Innymi słowy, elementy dokumentu są podstawowymi wybieraczami.

Jeśli ustawiasz style HTML, wybieracz zazwyczaj będzie jakimś elementem HTML, na przykład p, h1, em, a, nawet可以是 html sam w sobie:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Spróbuj sam

Można przełączać styl między różnymi elementami.

Załóżmy, że zdecydowałeś się ustawić powyższy tekst akapitu (zamiast elementu h1) na kolor szary. Wystarczy zmienić wybieracz h1 na p:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Spróbuj sam

Wybieracz typu

W standardach W3C, wybieracz elementów nazywany jest wybieraczem typu (type selector).

„Wybieracz typu dopasowuje nazwy typów elementów języka dokumentu. Wybieracz typu dopasowuje każdą instancję tego typu w drzewie dokumentu.”

Poniższe reguły dopasowują do wszystkich elementów h1 w drzewie dokumentu:

h1 {font-family: sans-serif;}

Dlatego możemy również ustawić style dla elementów dokumentu XML:

Dokument XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

Dokument CSS:

note
  {
  font-family: Verdana, Arial;
  margin-left: 30px;
  }
to
  {
  font-size: 28px;
  display: block;
  }
from
  {
  font-size: 28px;
  display: block;
  }
heading
  {
  color: red;
  font-size: 60px;
  display: block;
  }
body
  {
  color: blue;
  font-size: 35px;
  display: block;
  }

Zobacz efekt

Na podstawie powyższych przykładów, możesz zobaczyć, że selektory elementów CSS (selektory typów) mogą ustawiać style elementów dokumentu XML.

Jeśli potrzebujesz więcej informacji na temat dodawania stylów do dokumentów XML, odwiedź Kursy XML.