代码之家 › 专栏 › 技术社区 › THX-1138

是否有按类前缀的CSS选择器?

css-selectors css

144

THX-1138 · 技术社区 · 14 年前

我想将CSS规则应用于其中一个类与指定前缀匹配的任何元素。

例如,我想要一个规则,它将应用于类以开头的div status- (以下代码段中为A和C,但不是B):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

某种组合:
div[class|=status] 和 div[class~=status-]

在css2.1下是否可行?它在任何CSS规范下都是可行的吗?

注意:我知道我可以使用jQuery来模拟它。

4 回复 | 直到 9 年前

409

Daniel Compton 6 年前

这在CSS2.1中是不可行的,但是在CSS3属性子串匹配选择器中是可行的(它是

div[class^="status-"], div[class*=" status-"]

请注意第二个属性选择器中的空格字符。这会起作用 div class 属性满足以下任一条件:

[class^="status-"]
[class*=" status-"] 包含直接出现在空格字符后面的子字符串“status-”。类名用空格隔开 per the HTML spec ,因此具有重要的空间特征。如果指定了多个类,则检查第一个类之后的任何其他类, 如果属性值是空格填充的(这可能发生在一些输出 班 属性)。

here .

如上所述,需要组合两个属性选择器的原因是 [class*="status-"] 将匹配以下元素,这可能是不需要的:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

如果你能确保这样的场景为了简单起见,您可以自由地使用这样的选择器。然而,上面的组合要强大得多。

status- 加上自己的前缀 status 而不是上课 as Gumbo suggests .

sheriffderek 7 年前

CSS属性选择器将允许您检查字符串的属性(在本例中-类名)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(看起来它实际上处于2.1和3的“推荐”状态)

以下是我认为它是如何工作的:

[ ] :是复杂选择器的容器 如果你愿意。。。
class :“类”是你在看这个案子。
* :modifier(如果有):在这种情况下-“wildcard”表示您正在查找任何匹配项。
test- :包含字符串“test-”的属性-的值(假设有一个值)(可以是任何值)

[class*='test-'] {
  color: red;
}

如果你有充分的理由,你可以说得更具体一些

ul[class*='test-'] > li { ... }

我试过寻找边缘案例,但我认为没有必要结合使用 ^ 和 *

例子: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

IE6以上的一切都会欣然服从。:)

请注意:

[class] { ... }

将选择任何具有类的内容。。。

Gumbo 14 年前

这在CSS选择器中是不可能的。但是你可以用两个类而不是一个。地位和 重要的 而不是 .

SBUJOLD 14 年前

attribute selector 在-sign之前完全匹配或部分匹配,但在这里不起作用,因为您有多个属性。如果要查找的类名始终是第一个,则可以执行以下操作:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>