Применяются ли контекстные правила для селекторов типа также для селекторов класса и идентификатора в CSS?

Question

Я новичок в CSS и сталкиваюсь с проблемой, связанной с контекстными селекторами:

Q1) Каков эффект создания селекторов следующим образом:

.test1 .test2{
    background:red;
}

Здесь test1и test2 - селекторы классов.

Я понимаю, что когда мы используем такую ​​структуру с селекторами 'type', это приводит к стилизации потомков.

Это то же самое для селекторов класса?

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}

Но я не смог найти точное значение этогоструктура.

Может ли какое-либо руководство в этом.

Спасибо за любую помощь заранее.

Answer 1

1. Да, это то же самое для селекторов классов.
2. Да, контекстные правила, которые применяются к селекторам типов, также будут применяться к селекторам классов.
3. Да, они также будут применяться к селекторам идентификаторов.

---

Я видел использование такой структуры в файлах css библиотек js, таких как ExtJS

.x-border-box .x-reset * {box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box- калибровки: граница-бокс}

Но я не смог определить точное значение этой структуры.

Это означает, что примените это правило ко всем дочерним элементам элемента с классом x-reset, чей непосредственный или любой следующий родительский элемент имеет класс x-border-box.

Answer 2

Да, они работают одинаково. Они все простые селекторы.

Answer 3

Вы можете просто смешивать и сочетать.Так что-то вроде этого:

#header h1.main a

Значит;любой a-элемент, который является потомком элемента h1 с именем класса 'main', который снова является потомком любого элемента с идентификатором 'header'.Обратите внимание, что вы можете просто заменить #header заголовком * # (хотя я бы этого не делал)

Answer 4

Q1) Каков эффект создания селекторов следующим образом:

.test1 .test2 {background: red;}

Это изменит background-color элемента с классом test2, который вложен в класс test1.

Так что да.

Q2) Если да, то все контекстные правила (+,>) и т. Д. Для селектора типа также будут применяться к селекторам классов?

Да, ониприменять.Но есть небольшие различия.

Например, вышеприведенное правило близко к тому же, что и .test1 > .test2.Это предназначается для прямого потомка .test1, тогда как первое правило (только с классами) предназначалось бы для любого .test2 потомка .test1, независимо от того, кто вложил.

Q3) Ибудут ли все эти правила также применимы к селекторам 'id'?

Да, id и class работают одинаково, ожидая, что id предназначается для определенного уникального элемента иКласс может применяться к нескольким элементам.