Селектор CSS Вложение

Question

Возможно ли в селекторах селекторов селекторов? У меня есть много стилей, которые ищут так:

#header h1{ 
    ... 
} 
#header img{ 
    ... 
} 
#header form{ 
    ... 
} 

, и я хочу, чтобы уплотнить их так, что они будут выглядеть примерно так:

#header{ 
    h1{ 
    ... 
    } 
    img{ 
    ... 
    } 
    form{ 
    ... 
    } 
} 

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

Answer 1

Нет, это не так. Однако, если вы используете препроцессоры, такие как или LESS (назовите только самые популярные).

В зависимости от того, что вам нужно, вы должны изучить один из них. Они определенно стоят того, так как они могут значительно облегчить вашу работу не только с помощью селекторов, но и с внедрением переменных, миксинов, петель и других полезных инструментов.

Introduction to and Comparison of CSS-Preprocessors

Answer 2

Не в ванильном CSS, но есть языки с компилятором, такие как LESS, которые позволяют использовать вложенные селекторы.

Моя библиотека выбора - Sass, которая теперь интегрирована в конвейер Rails.

Answer 3

Нет, это не возможно в обычном CSS. Вам нужно что-то вроде Sass или Less.

Answer 4

Нельзя использовать простой старый CSS.

Но вы можете делать LESS или Sass. Эти два компилируются в CSS.

Sass создает CSS, который может быть отступом, как и ваш пример.

#header{} 
    #header h1{ 
    ... 
    } 
    #header img{ 
    ... 
    } 
    #header form{ 
    ... 
    } 

Answer 5

Вы могли бы найти такие вещи, как

@-moz-document url-prefix() { 
    .myDefinition { 
    } 
} 

однако. Они анализируются Firefox и могут использоваться для предоставления хакеров CSS только для Firefox, но я не уверен, насколько они действительны и соответствуют стандарту.