Селекторы элементов CSS

Селекторы элементов CSS

Самыми распространенными выборщиками CSS являются элементные выборщики. Иными словами, элементы документа являются最基本的 выборщиками.

Если устанавливать стили HTML, выборщик обычно будет某个 элементом HTML, например p, h1, em, a, или даже html сам по себе:

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

Попробуйте сами

Стиль можно переключить с одного элемента на другой.

Предположим, что вы решили установить цвет текста в абзацах (а не элементов h1) в серый. Достаточно изменить выборщик h1 на p:

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

Попробуйте сами

Выборщик типа

В стандарте W3C элементный выборщик также называется выборщиком типа (type selector).

«Выборщик типа соответствует имени типа элемента документа. Выборщик типа соответствует каждому экземпляру этого типа в дереве документа.»

Следующие правила соответствуют всем элементам h1 в дереве документа:

h1 {font-family: sans-serif;}

Таким образом, мы можем также устанавливать стили для элементов документа XML:

Документ 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>Памятка</heading>
<body>Не забудьте встречу!</body>
</note>

Документация 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;
  }

Просмотр эффекта

Как вы можете видеть из примеров выше, селекторы элементов CSS (типовые селекторы) могут устанавливать стили для элементов в документе XML.

Если вам нужно больше информации о добавлении стилей к документам XML, пожалуйста, посетите Тutorиалы по XML.