Styling elements with a dot (.) in the class name

我有这样的元素

<span class='a.b'>

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

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

like

.a.b { }
56753 次浏览
小开
最佳答案 
.a\.b { }

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

小开

你可以的。 CSS 类名的含义如’。A.b’的目标元素的 CSS 名称与’a’，也有类名称’b’，这意味着你有这两个类在同一个元素。就像 div.cssname 针对带 cssname 的 div 元素一样。

小开

这次聚会来得很晚，但是您可以使用属性选择器。

在您的示例中，为了针对 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://"] {...}

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

属性间距选择器

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

小开

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

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

我还没有为此发布任何示例代码，因为人们可能想使用普通的 Javascript 或 jQuery，而且这是一件非常简单的事情。

为了澄清，我的游戏框架完全按照 OP 描述的那样做，所以翻译可以应用于某些 div 和 span。这并不是一个讨厌的决定类名称的方法，它只是对于使用具有短语键的字典时创建标记的人有用


提交答案