Почему пробелы используются для разделения вещей в CSS - PullRequest
6 голосов
/ 13 июля 2011

Вот что-то в таблице стилей WordPress, которую я не понимаю:

blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}

Что делает пробел между цитированием и цитированием?Я понимаю, если они разделены запятой, то и blockquote, и cite будут иметь "font-style: normal;"теперь они разделены пробелами. Означает ли это, что если тег тега цитаты встроен в тег цитирования, он получит «font-style: normal;»?

Спасибо.

Ответы [ 3 ]

16 голосов
/ 13 июля 2011

Пространство известно как потомок комбинатор .blockquote cite выбирает любой элемент cite в элементе blockquote.Аналогично для blockquote em и blockquote i.

Другими словами, это не «если тег цитаты вставлен в тег цитирования», это наоборот (кроме того, вы не можете поместить blockquote s на cite s на первом месте).

Как вы заметили, последовательности селекторов запятых групп в том же правиле.

1 голос
/ 08 октября 2015

Пробел между селекторами заставит таблицу стилей применять правило выборочно. Пробел является потомком селектора или комбинатора. Он применяется к любому элементу-потомку в потомке.

Правило blockquote cite { font-style: normal; } будет применять стиль шрифта только к item 1 и item b. И item 1, и item b являются потомками item A. item A не получит правило.

 A. item A (Blockquote)
   1. item 1 (Cite)
     a. item a
     b. item b (Cite)
   2. item 2

Это немного похоже на селектор >. Это дочерний селектор. Это относится к любому дочернему элементу. Ребенок - потомок 1-го уровня. В приведенной выше таблице с правилом blockquote > cite { font-style: normal; } вместо item b не будет применено правило стиля шрифта, так как оно является потомком 2-го уровня и, следовательно, не дочерним. item A также не получит правило.

Если вы хотите, чтобы и blockquote, и любые cite в пределах blockquote получили правило, они оба должны быть перечислены:

blockquote, blockquote cite { font-style: normal; }

1 голос
/ 13 июля 2011

Это означает, что цель cite внутри тега blockquote и т. Д.

В этом случае сайт пытается переопределить весь курсив, установленный внутри blockquote.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...