CSS 类名中带有点 (.) 的样式元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3447329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling elements with a dot (.) in the class name
提问by dotty
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?
我可以用一个点来设置类名的样式吗？
like
喜欢
.a.b { }
回答by RoToRa
.a\.b { }
However there could be browsers around that don't support this.
但是，周围可能有不支持此功能的浏览器。
回答by Matija Mrkaic
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"] {...}
回答by dddkkk
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.
是的你可以。像“.ab”这样的 CSS 类名的含义是针对 CSS 名称为 'a' 的元素，该元素也具有类名 'b'，也就是说你在同一个元素中拥有这两个类。就像 div.cssname 使用 cssname 定位 div 元素一样。
