У меня есть такой элемент
<span class='a.b'>
К сожалению, это имя класса происходит из приложения электронной коммерции и не может быть изменено.
Могу ли я создать имя класса с точкой в нем?
как
.a.b { }
Элементы стиля с точкой (.) В имени класса
Ответ 1
.a\.b { }
Однако могут существовать браузеры, которые не поддерживают это.
Ответ 2
Очень поздно, но вы можете использовать селектор атрибутов.
В вашем случае для таргетинга на элемент class='a.b' вы можете использовать:
[class~="a.b"] {...}
// or
span[class~="a.b"] {...}
Кроме того, здесь приведен полный список селекторов атрибутов.
Селектор присутствия атрибутов
// Selects an element if the given attribute is present
// HTML
<a target="_blank">...</a>
// CSS
a[target] {...}
Селектор выбора атрибутов
// Selects an element if the given attribute value
// exactly matches the value stated
// HTML
<a href="http://google.com/">...</a>
// CSS
a[href="http://google.com/"] {...}
Атрибут содержит селектор
// Selects an element if the given attribute value
// contains at least once instance of the value stated
// HTML
<a href="/login.php">...</a>
// CSS
a[href*="login"] {...}
Атрибут начинается с селектора
// Selects an element if the given attribute value
// begins with the value stated
// HTML
<a href="https://chase.com/">...</a>
// CSS
a[href^="https://"] {...}
Атрибут заканчивается с помощью селектора
// Selects an element if the given attribute value
// ends with the value stated
// HTML
<a href="/docs/menu.pdf">...</a>
// CSS
a[href$=".pdf"] {...}
Селектор с разнесением атрибутов
// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated
// HTML
<a href="#" rel="tag nofollow">...</a>
// CSS
a[rel~="tag"] {...}
Атрибут Hyphenated Selector
// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated
// HTML
<a href="#" lang="en-US">...</a>
// CSS
a[lang|="en"] {...}
Ответ 3
Да, вы можете. Значение имени класса CSS, такого как ".a.b", предназначено для элементов, имеющих имя CSS с "a", которое также имеет имя класса "b", что означает, что у вас есть оба класса в одном элементе. Так же, как div.cssname таргетинга элементов div с помощью cssname.