Элементы укладки с точкой (.) в имени класса


Сенной у меня есть такой элемент

<span class='a.b'>

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

можно ли стилизовать имя класса с точкой в нем?

как

.a.b { }
3 54

3 ответа:

.a\.b { }

однако могут быть браузеры вокруг, которые не поддерживают это.

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

в вашем случае, чтобы пристрелть 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"] {...}

Атрибут Дефис Селектор

// 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"] {...}

источник: learn.shayhowe.com

Да, вы можете. Значение имени класса CSS типа '.a.b' нацеливает элементы,которые имеют имя CSS с "a", которое также имеет имя класса "b", то есть у вас есть оба этих класса в одном элементе. Так же как и див.cssname таргетинг div элементов с cssname.