CSS с '[классом]' как частью селектора. Символьная строка «класс» в скобках

Question

Я смотрю на CSS с такого рода правила в нем:

table[class].outer{width:600px;} 

Я никогда не видел этот тип селектора раньше, и это почти невозможно найти, даже с настройкой Google «verbatim».

Может ли кто-нибудь объяснить, что здесь происходит? Это какой-то взлом? Это просто сломанный селектор CSS3?

В случае, если есть какая-либо путаница, не [class="something"] или [class^="something'] или что-нибудь, где строка class сопровождается дальнейшим кодом в соответствии с содержания атрибута. Буквально только открытая скобка, c, l, a, s, s, закрывающая скобка. Это то, что я подразумевал под сломанным селектором CSS3. Селектор для «имеет атрибут класса», не требующий соответствия любому атрибуту .

Возможно, это связано с обработкой электронной почты. Правило, похоже, не применяется в любом обычном браузере.

Answer 1

Селектор атрибутов [class] соответствует любому элементу, который имеет атрибут класса. Он работает точно так же, как и следовало ожидать, что селектор атрибутов будет соответствовать любому другому атрибуту, а не только классу.

Нет ничего разбитого о таком селекторе per se; это действительно CSS. Даже если это необходимо для получения CSS в электронных письмах, работающих в Yahoo! Почта раз в то время, это уже не так. Нет ничего плохого в том, что вы хотите сопоставлять только те элементы, которые имеют атрибут класса.

Что это странно, однако, оказывает селектор на [class] атрибут вместе с селектором класса в том же селекторе соединения. В HTML селектор классов подразумевает, что элемент имеет атрибут класса, что делает селектор атрибутов совершенно лишним. Единственная цель, с которой мог бы справиться такой селектор, - это то, что я могу сказать, увеличивает специфику. Но вы также можете сделать это, дублируя селектор классов (т. Е. table.outer.outer), так как селектор атрибутов и селектор классов одинаково специфичны. Возможно, автор этого не понимал, или они думали, что дублирование селекторов классов выглядело глуше, чем селектор атрибутов [class].

Возможно, это была просто ошибка, и мы никогда не узнаем.

Answer 2

[класс] селектор просто означает, что если у него есть класс, например

div[class] { 
 
    color: red; 
 
}

<div class="a">somthing</div> 
 

 
<div>something else</div> 
 

 
<div class="b">blah blah</div>

, как вы можете видеть, первый и третий ДИВ получает стиль, но второй один не делает, так в вашем случае in would not do much, потому что, если класс таблицы является .outer, то он, очевидно, имеет класс