样式元素在类名中带有点(.)

Question

干我有这样的元素

<span class='a.b'>

不幸的是,这个类名来自电子商务应用程序,无法更改.

我可以设置带有点的类名称吗？

喜欢

.a.b { }

Answer 1

.a\.b { }

然而,可能有浏览器不支持这一点.

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

属性连字符选择器

// 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