在类名称中用点(。)样式化元素


68

干草我有这样的元素

<span class='a.b'>

不幸的是,此类名称来自电子商务应用程序,无法更改。

我可以在班级名称中打点吗?

喜欢

.a.b { }

35
哪个疯狂的系统会生成这样的类名?
SLaks 2010年

部分重复数据删除,但可能回答了这个问题:stackoverflow.com/questions/448981/...
尼古拉斯·奈特

疯狂的系统:类名是属性文件中的键。不同语言的不同属性文件允许基于语言无关但语义相同的内容进行动态格式化。
mut1na 2011年

2
“哪个疯狂的系统会生成这样的类名?” Shopify可以。
jwinn

1
@SLaks -谷歌,facebook..youtube..gmail..basically任何大型网络系统
VSYNC

Answers:


105
.a\.b { }

但是,周围可能会有一些浏览器不支持此功能。


喜欢?firefox 1.5 +,Safari 3+和IE 6+是否支持它?

2
我不确定(因此可以)。但是,IE6令人惊讶地做到了。
RoToRa

1
IE5.x和Opera的早期版本不支持此功能。
bobince 2010年

这似乎根本不起作用。假设我要设置span.ab(具有“ .a.b”类的“ span”)样式,我该怎么做?

2
您需要使用反斜杠对属于类名称的点进行转义,因此在这种情况下:span.a\.b。示例:jsfiddle.net/Mrafq/1
RoToRa 2010年

38

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

对于您的情况,要定位该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


3
属性分隔的选择器可能更适合一般情况,因为在元素上您可能不想选择其他分类。
Thelem

0

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

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

我还没有发布任何示例代码,因为人们可能想使用香草Javascript或jQuery,这很简单。

为了明确起见,我的游戏框架与OP所描述的完全相同,因此可以将翻译应用于某些div和span。这不是确定类名的讨厌方法,它仅对使用带有词组键的字典的人创建标记有用


-8

是的你可以。CSS类名(如“ .ab”)的含义是针对具有CSS名称(带有“ a”)的元素,也具有类名“ b”(也就是说,您将这两个类都放在同一个元素中)。就像div.cssname用cssname定位div元素一样。


5
由于您不了解该问题,因此该投票已被否决。OP没有任何具有类“ a”或“ b”的元素,他正尝试为具有“ ab”类的元素设置样式。
Thelem
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.