#css #css-selectors
#css #css-селекторы
Вопрос:
Я новичок в CSS и столкнулся с проблемой, связанной с контекстными селекторами, следующим образом:
Q1) Каков эффект создания селекторов следующим образом:
.test1 .test2{
background:red;
}
Здесь test1 и test2 являются селекторами классов.
Я понимаю, что когда мы используем такую структуру с селекторами типа, это приводит к стилизации потомков.
Это то же самое для селекторов классов?
Q2) Если да, то будут ли все контекстные правила ( , >) и т. Д. Для селектора ‘type’ также применяться для селекторов классов?
Q3) И будут ли все эти правила также применимы к селекторам ‘id’?
Я видел использование такой структуры в файлах css библиотек js, таких как ExtJS
.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
Но я не смог определить точное значение этой структуры.
Может ли какое-либо руководство по этому поводу.
Заранее спасибо за любую помощь.
Ответ №1:
- Да, это то же самое для селекторов классов.
- Да, контекстные правила, которые применяются к селекторам типов, также будут применяться к селекторам классов.
- Да, они также будут применимы к селекторам идентификаторов.
Я видел использование такой структуры в файлах css библиотек js, таких как ExtJS
.x-border-box .x-сброс *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
Но я не смог определить точное значение этой структуры.
Это означает, что применяйте это правило ко всем дочерним элементам элемента с классом x-reset , чей непосредственный или любой другой родительский элемент имеет класс x-border-box .
Ответ №2:
Да, они работают одинаково. Все они простые селекторы.
Комментарии:
1. Большое спасибо за то, что поделились информацией. На самом деле я просматривал ссылку — w3.org/TR/CSS2/selector.htm — или фактически, по любой другой ссылке, все примеры, связанные с контекстными селекторами, приведены с использованием селектора ‘type’, и ничего не было упомянуто о том, что правила ‘context’ применяются ко всем видам селекторов. Именно по этой причине я не смог получить четкую картину. Но, похоже, что контекстные правила существуют для любого вида селекторов, даже если селекторы определены пользователем. Еще раз спасибо.
2. Обратите внимание, что они не являются «простым селектором», поскольку это совершенно другое мышление в CSS. Простой селектор — это либо селектор типа, либо универсальный селектор, за которым сразу же следует ноль или более селекторов атрибутов, селекторов идентификаторов или псевдоклассов в любом порядке. Но это «простые селекторы» 🙂
3. @Gerben: На самом деле, селекторы типов, селекторы идентификаторов и селекторы классов являются простыми селекторами в соответствии с этим определением.
4. @NetEmp: В примерах обычно используются селекторы типов, потому что их легче всего читать, а имена элементов HTML будут знакомы большинству читателей, но сам текст обычно просто говорит «селектор».
5. @Chuck Мой плохой. Я думал, вы имели в виду, что ‘.test1 .test2’ был «простым» селектором.
Ответ №3:
Q1) Каков эффект создания селекторов следующим образом:
.test1 .test2{ background: красный; }
Это изменит значение background-color элемента с классом of test2 , который вложен в класс of test1 .
Так что да.
Q2) Если да, то будут ли все контекстные правила ( , >) и т. Д. Для селектора ‘type’ также применяться для селекторов классов?
Да, они применяются. Но есть небольшие различия.
Например, приведенное выше правило близко к тому же, .test1 > .test2 что и . Это нацелено на прямого дочернего элемента .test1 , тогда как первое правило (только с классами) будет нацелено на любого .test2 потомка a .test1 , независимо от того, кто вложен.
Q3) И будут ли все эти правила также применимы к селекторам ‘id’?
Да, id и class работают таким же образом, ожидайте, что id целевые объекты для определенного уникального элемента и класса могут быть применены к нескольким элементам.
Комментарии:
1. Спасибо, Джейсон, но вы упомянули «Да, в основном», так есть ли какие-либо исключения?
2. Нет, @NetEmp. Я отредактировал это. Я хотел написать, что контекстные правила, которые вы выделили (>, ), немного отличаются от приведенного выше примера. См. Редактирование.
Ответ №4:
Вы можете просто смешивать и сопоставлять. Итак, что-то вроде этого:
#header h1.main a
Означает; любой a-элемент, который является потомком элемента h1 с именем класса ‘main’, который снова является потомком любого элемента с идентификатором ‘header’. Обратите внимание, что вы могли бы просто заменить #header на * #header (хотя я бы этого не сделал)
Комментарии:
1. Спасибо за пример. Это очень полезно.