Допустим, у меня есть html-элемент с классом box: <p class="box alert">Content here</p>

Недавно я узнал о способе таргетинга на элементы в CSS, поэтому, если я хочу выбрать любой элемент с классом box, я мог бы использовать это: *[class~=box] {border: 2px solid grey;}

И мне интересно, разве это буквально не то же самое, что просто таргетинг на элемент по имени класса? Или я неправильно понял? .box {border: 2px solid grey;}

Если это одно и то же, в каких ситуациях уместно использовать второй метод, а не первый?

Селектор атрибутов на самом деле не предназначен для классов, он предназначен, например, для других атрибутов в элементах a[href*="google"] , но да, вы можете стилизовать элементы подобным образом, и это определенно будет считаться антишаблоном.

Хотя .classname и [class~="classname"] оформляли бы одни и те же элементы, специфика CSS этих селекторов вычислялась бы по-разному — честно говоря, я не совсем уверен, но *[class~="classname"] могла бы выиграть с .classname , и это то, о чем должен знать человек, работающий со стилями, которые были написаны подобным образом.

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

Практическое различие

С практической точки зрения, селектор классов гораздо более удобочитаем и понятен. Это также намного эффективнее, поскольку браузеры обрабатывают классы иначе, чем другие атрибуты, для запросов CSS и DOM. Селектор атрибута в целом имеет больше смысла для любого другого атрибута, который не является a class , когда вы хотите выбрать по одному значению из «списка слов, разделенных пробелами, одно из которых в точности соответствует значению» (спецификация MDN).

Например, если у вас есть data атрибут с несколькими возможными значениями на выбор, вот так:

 <div data-colors="blue">
<div data-colors="yellow blue">
<div data-colors="red blue green">
  

Селектор атрибута [data-colors~=blue] выбрал бы все три элемента, независимо от любых других значений в атрибуте.

Историческая разница

Исторически селектор класса .box является частью исходной спецификации CSS (.т.е. «CSS 1»). Это означает, что этот селектор поддерживается любым браузером прошлого и настоящего. С другой стороны, селектор атрибутов [class~=box] является лишь частью второй итерации спецификации CSS (т. Е. «CSS2») и поэтому поддерживается не всеми возможными браузерами; хотя вам пришлось бы вернуться к Internet Explorer 6, чтобы столкнуться с проблемами с этим селектором.

Одним из важных отличий является использование некоторых специальных имен с вашими классами.

Вот пример для иллюстрации:

 .box {
  height:50px;
  background:red;
  margin:5px;
}

.80% {
  width:80%;
}

.50% {
  width:50%;
}  

 <div class="box 80%"></div>
<div class="box 50%"></div>  

В приведенном выше примере ничего не произойдет, потому что нам нужно экранировать число и % внутри селектора, но с помощью селектора атрибутов это просто:

 .box {
  height:50px;
  background:red;
  margin:5px;
}

[class~="80%"] {
  width:80%;
}

[class~="50%"] {
  width:50%;
}  

 <div class="box 80%"></div>
<div class="box 50%"></div>  

Для первого вам нужно написать следующее, что не является тривиальным:

 .box {
  height:50px;
  background:red;
  margin:5px;
}

.38 0% {
  width:80%;
}

.35 0% {
  width:50%;
}  

 <div class="box 80%"></div>
<div class="box 50%"></div>  

Оба будут иметь точно такой же результат, так что *[class~="classname"] это эквивалентно .classname , только выбор производится с использованием class атрибута. Смотрите attribute selector, чтобы получить больше информации об этом синтаксисе.

 .classname {
  color: blue;
}

*[class~="classname"] {
  color: red;
}  

 <p class="classname">Content here</p>  

 *[class~="classname"] {
  color: red;
}

.classname {
  color: blue;
}  

 <p class="classname">Content here</p>