Как называется этот селектор?

Я только что обнаружил этот тип селектора. Я чувствовал, что это колдовство!

Вы вставляете в css два простых селектора, комбинируя их.

.One {color: red;}
.Two {color: blue}
.One.Two {color: orange;}
<h2 class="One">One</h2>
<h2 class="Two">Two</h2>
<h2 class="One Two">One Two</h2>

Объединенные селекторы? Комбинированные селекторы? Взбалтывать, не перемешивать?

Я хочу видеть поддержку в разных браузерах.

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

Этот селектор появляется в примере спецификации CSS 3: https://www.w3.org/TR/css3-selectors/#class-html, но у него нет имени. Его нет в общей таблице: https://www.w3.org/TR/css3-selectors/#selectors

Я думаю, есть ли у него какое-то имя, например, селектор «и», «соседний» селектор или что-то в этом роде. При поиске совместимости, например, в http://caniuse.com/, нужно быть более конкретным.

Я делаю, например, тесты, изменяющие порядок, .Two.One против .One.Two методом проб и ошибок. Конкретная документация будет удобной.


css css-selectors
person Rafael    schedule 14.10.2016    source источник
comment
Это называется просто селектор класса.... оба три являются селекторами классов. Другая специфика, но все же селектор класса... Цепочки не меняют термин для селектора так же, как a + a + div это все еще смежный селектор   -  person DaniP    schedule 14.10.2016
comment
Повторное открытие, потому что вопрос касается именования селектора, а не выбора определенных элементов.   -  person Oriol    schedule 14.10.2016
comment
Спасибо, Ориол, я собирался сказать это. :о)   -  person Rafael    schedule 14.10.2016

Ответы (2)


arrow_upward
1
arrow_downward

Селекторы уровня 3 называют это последовательностью простых селекторов:

Последовательность простых селекторов – это цепочка из простых селекторов., которые не разделены комбинатором.

В этом случае простыми селекторами являются селекторы классов .One и .Two.

.One.Two также является селектором, состоящим только из этой последовательности простых селекторов.

селектор — это цепочка из одной или нескольких последовательностей простых селекторов, разделенные комбинаторами.

.One.Two также является группой селекторов, образованной только этим селектором.

Разделенный запятыми список селекторов представляет собой объединение всех элементов, выбранных каждым из отдельных селекторов в списке.

В последовательности простых селекторов порядок не имеет значения:

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

поэтому .Two.One и .One.Two эквивалентны.

person Oriol    schedule 14.10.2016

arrow_upward
1
arrow_downward 

.One.Two {color: orange;}

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

Это комбинация селекторов

Важным моментом здесь является то, что вы можете ориентироваться на элементы, которые имеют комбинации классов и идентификаторов, объединяя эти селекторы вместе без пробелов.

person Nirjhar Vermani    schedule 14.10.2016
comment
Ага. Я понимаю, что это такое. Мне интересно, есть ли у него конкретное имя. - person Rafael; 14.10.2016
comment
Мы обычно называем это комбинацией селекторов, для нее нет конкретного названия :) - person Nirjhar Vermani; 14.10.2016
comment
Это просто селектор класса CSS. Вот ссылка на официальную документацию. Обратите внимание, что в конце раздела 5.8.3 показано, как их использовать так, как вы это делаете в своем вопросе. w3.org/TR/CSS2/selector.html#class-html< /а> - person Zack; 14.10.2016
comment
Да, Зак, я тоже это видел, но это очень скудная документация. Я думаю, мне нужно провести некоторые методические эксперименты. н_н - person Rafael; 14.10.2016