样式元素在类名中带有点（。）

Hay I have an element like this

干草我有这样的元素

<span class='a.b'>

Unfortunately this class name comes from an eCommerce application and cannot be changed.

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

Can I style a class name with a dot in it?

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

喜欢

.a.b { }

3 个解决方案

#1

.a\.b { }

However there could be browsers around that don't support this.

然而，可能有浏览器不支持这一点。

#2

Coming very late to this party, but you can use attribute selectors.

这个派对来得很晚，但你可以使用属性选择器。

In your case, to target the class='a.b' element, you could use:

在您的情况下，要定位class ='a.b'元素，您可以使用：

[class~="a.b"] {...}
// or
span[class~="a.b"] {...}

Additionally, here is the full list of attribute selectors.

此外，这是属性选择器的完整列表。

Attribute Present Selector

属性存在选择器

// Selects an element if the given attribute is present

// HTML
<a target="_blank">...</a>

// CSS
a[target] {...}

Attribute Equals Selector

属性等于选择器

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

Attribute Contains Selector

属性包含选择器

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

Attribute Begins With Selector

属性从选择器开始

// Selects an element if the given attribute value
// begins with the value stated

// HTML
<a href="https://chase.com/">...</a>

// CSS
a[href^="https://"] {...}

Attribute Ends With Selector

属性结束于选择器

// Selects an element if the given attribute value
// ends with the value stated

// HTML
<a href="/docs/menu.pdf">...</a>

// CSS
a[href$=".pdf"] {...}

Attribute Spaced Selector

属性间隔选择器

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

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

Source: learn.shayhowe.com

资料来源：learn.shayhowe.com

#3

-6

Yes you can. The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.

是的你可以。像'.a.b'这样的CSS类名的含义是目标元素，其CSS名称带有'a'，它也有类名'b'，也就是说你在同一个元素中都有这两个类。就像div.cssname使用cssname定位div元素一样。

#1

.a\.b { }