在类名中使用点 (.) 对元素进行样式设置答案

【问题标题】：Styling elements with a dot (.) in the class name在类名中使用点 (.) 对元素进行样式设置
【发布时间】：2011-03-27 17:09:46
【问题描述】：

嘿，我有这样的元素

<span class='a.b'>

很遗憾，这个类名来自电子商务应用程序，无法更改。

我可以在类名中添加一个点吗？

喜欢

.a.b { }

【问题讨论】：

什么疯狂的系统会生成这样的类名？
部分欺骗，但可能回答了这个问题：stackoverflow.com/questions/448981/…
疯狂的系统：类名是属性文件中的键。不同语言的不同属性文件允许基于与语言无关但语义相同的内容进行动态格式化。
"什么疯狂的系统会生成这样的类名？" Shopify 确实……呃。
@SLaks - google、facebook..youtube..gmail..基本上任何大型网络系统

标签： css class

【解决方案1】：

.a\.b { }

但是周围的浏览器可能不支持此功能。

【讨论】：

喜欢吗？ firefox 1.5+、Safari 3+ 和 IE 6+ 支持吗？
我不确定（因此是“可能”）。然而 IE6 却出人意料地做到了。
IE5.x 和 Opera 的早期版本不支持此功能。
这似乎根本不起作用。假设我想设置 span.a.b 的样式（带有 '.a.b' 类的 'span'），我该怎么做？
您需要使用反斜杠转义作为类名一部分的点，因此在这种情况下：span.a\.b。示例：jsfiddle.net/Mrafq/1

【解决方案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"] {...}

Source: learn.shayhowe.com

【讨论】：

属性间隔选择器可能更适合一般情况，因为元素上可能存在您不想选择的其他类。
复合物是什么样的？ img[data~="120"].recognition_template 其中 data="120" 和 class="recognition_template"？

【解决方案3】：

也许您可以扫描这些类的元素并添加一个您可以设置样式的类。

例如，扫描所有带有“a.b”类的元素，然后添加一个新的“style-ab”类或类似的。

我没有为此发布任何示例代码，因为人们可能想要使用 vanilla Javascript 或 jQuery，这很简单。

为了澄清，我的游戏框架完全按照 OP 描述的那样进行，因此可以将翻译应用于某些 div 和 span。确定类名并不是一种讨厌的方式，它对人们在使用具有短语键的字典时创建标记很有用

【讨论】：

请为我们这些需要起点的人添加香草JS。否则，您的答案仅限于那些了解如何“扫描所有元素”的人

【解决方案4】：

是的，你可以。 CSS 类名（如 '.a.b'）的含义是针对具有 CSS 名称的元素 'a' 也有类名 'b'，也就是说你在同一个元素中拥有这两个类。就像 div.cssname 使用 cssname 定位 div 元素一样。

【讨论】：

这被否决了，因为你没有理解这个问题。 OP 没有任何具有“a”类或“b”类的元素，他正在尝试为具有“a.b”类的元素设置样式。