CSS более короткий запрос

Question

Например, у меня есть селектор CSS:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

Есть ли способ написать как,

(#spotlightPlayer .container .commands.over) span, ul, ul li { clear:both }

Answer 1

Вы можете использовать некоторые препроцессоры CSS, такие как Преобразователь на стороне сервера Shaun Inman CSS для преобразования этого:

#spotlightPlayer .container .commands.over {
    span,
    ul,
    ul li { clear:both }
}

в это:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

Но у самого CSS такого синтаксиса нет.

Answer 2

Вы можете проверить Sass . Он имеет много полезных маленьких функций, которые позволяют вам сделать ваши таблицы стилей более декларативными, чем позволяет обычный синтаксис CSS. Он обрабатывает глубоко вложенные теги очень естественным образом. В Sass это будет:

#spotlightPlayer .container. commands.over
  span, ul, ul li
    :clear both

Answer 3

Итак, что же вы на самом деле хотите, так это конструкцию 'with' / grouping?

Я не думаю, что CSS может сделать это напрямую, но это, безусловно, было бы полезно.

Вероятно, было бы не сложно написать базовый скрипт, который генерировал бы длинную версию из стенографии.

Однако, возможно, более последовательный синтаксис будет:

@with( #spotlightPlayer .container .commands.over )
{
    span, ul, ul li { clear:both }
}

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

edit: или еще лучше, используйте препроцессор css, предложенный в другом ответе.

Также относительно ответа / комментария Джереми: Если у вас нет (или вы планируете иметь) .commands.over предмет вне предмета .container, то вы можете опустить среднюю часть.

Когда вы разделяете пробелами ваши селекторы, он допускает любого потомка, вместо того, чтобы требовать прямых отношений родитель / потомок (как > делает).

Answer 4

Если все, что вам нужно, это очистить ваш CSS, и вы не хотите, чтобы ваш HTML был грязным, примените класс для каждого элемента span, ul и ul>li в соответствующем разделе. Вы можете очистить две дополнительные строки CSS, но вы будете набирать вес в HTML-краже. Я бы не рекомендовал это.

Answer 5

Похоже, проблема в структуре вашего документа, а не в CSS. Вам действительно нужен длинный список идентификаторов, чтобы получить конкретность, которая вам нужна? Вам нужны только атрибуты в ваших элементах HTML, например, для описания отображаемых данных.