Какова правильная терминология для этого вида объявления CSS ".myClass div"? - PullRequest
4 голосов
/ 29 марта 2012

Какова правильная терминология при обращении к декларации CSS, содержащей комбинаторы CSS, например:

.myClass div { ... }

Здесь я использую объявление, которое будет применять стили ко всем элементам div внутри элементас классом myClass.

Но это не имеет значения.Мне интересно знать правильную терминологию для объявления, в котором упоминаются родительские селекторы.

Но какова правильная терминология для такого рода объявлений?

Ответы [ 2 ]

6 голосов
/ 29 марта 2012

Они называются селекторы потомков :

http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

Селектор потомков состоит из двух или более селекторов, разделенных пустое пространство. Селектор потомков в форме "A B" совпадает, когда элемент B является произвольным потомком некоторого предка элемента A.

4 голосов
/ 29 марта 2012

Они называются Descendant Selectors, см. Здесь для получения дополнительной информации и другие термины

На всякий случай, если сайт W3 когда-либо выйдет из строя;) вот важные части:

Иногда авторам может потребоваться, чтобы селекторы соответствовали элементу, являющемуся потомком другого элемента в дереве документа (например, «Сопоставить те элементы EM, которые содержатся в элементе H1»).

Селекторы потомков выражают такие отношения в шаблоне.Селектор потомков состоит из двух или более селекторов, разделенных пробелами.Селектор потомков в форме "AB" совпадает, когда элемент B является произвольным потомком некоторого элемента-предка A.


Пример (также цитируется с сайта, на который дана ссылкавыше):

Например, рассмотрите следующие правила:

h1 { color: red }
em { color: red }

Хотя цель этих правил состоит в том, чтобы подчеркнуть текст, изменив его цвет, эффект будет потерян врегистр, такой как:

<H1>This headline is <EM>very</EM> important</H1>

Мы рассматриваем этот случай, дополняя предыдущие правила правилом, устанавливающим синий цвет текста всякий раз, когда EM встречается где-либо в пределах H1:

h1 { color: red }
em { color: red }
h1 em { color: blue }
...