Котировки в CSS-селекторах

Question

Какой из CSS-селекторов ниже вы бы предпочесть? (примечание используя кавычки)

 
[class*=col-] { /* all classes that contain 'col' */ 
    ... 
}

 
[class*='col-'] { /* all classes that contain 'col' */ 
    ... 
}

 
[class*="col-"] { /* all classes that contain 'col' */ 
    ... 
}

Answer 1

Я считаю, что вы можете оставить его в кавычки, если это буквенно-цифровой, до тех пор, как он не содержит»,», ', = <, или>.

из HTML спецификации:

Атрибуты размещаются внутри начального тега, и состоит из имени и значения, разделенных символом «=» символ атрибута ва. lue может оставаться без кавычек, если он не содержит пробелов или символов «'= < или>. В противном случае он должен быть указан с использованием одиночных или двойных кавычек. Значение, наряду с символом «=», может быть опущено вообще, если значение представляет собой пустую строку.

Для согласования предпочитаю двойные кавычки. Нет смысла использовать их только иногда - это создает беспорядочный и менее читаемый код.

Answer 2

Вы можете проверить этот интересной Unquoted attribute values in HTML and CSS/JS selectors

после перекрестных ссылок этих три различных секций HTML спецификации, мы можем, наконец, заключить, что действительное неупомянуто значением атрибута в HTML является любой строкой текста, не пустая строка и не содержит пробелы, символы табуляции, перевода строки, форма ленты, каретки возвращается,»,», `=, < или>.

Вы можете о мит кавычки, если значение атрибута является буквенно-цифровым (но не проверить исключение в статье выше)

Answer 3

[class*=col-] { /* all classes that contain 'col' */ 
    ... 
} 

[class*=col-] используется, чтобы найти, где элемент (в теге) содержит значение атрибута класса с коллектив- строки ,