是否有按类前缀的 CSS 选择器？
Posted
技术标签:
【中文标题】是否有按类前缀的 CSS 选择器？【英文标题】：Is there a CSS selector by class prefix? 【发布时间】：2011-03-21 07:14:36 【问题描述】：我想将 CSS 规则应用于其中一个类与指定前缀匹配的任何元素。
例如我想要一个适用于类以status- 开头的 div 的规则（A 和 C，但在以下 sn-p 中不是 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-]
在 CSS 2.1 下是否可行？它在任何 CSS 规范下都可行吗？
注意：我知道我可以使用 jQuery 来模拟它。
【问题讨论】：
【参考方案1】：这在 CSS2.1 中是不可行的，但可以使用 CSS3 属性子字符串匹配选择器（IE7+ 支持 ）：
div[class^="status-"], div[class*=" status-"]
注意第二个属性选择器中的空格字符。这会选取div 属性满足以下任一条件的class 元素：
[class^="status-"] — 以“status-”开头
[class*=" status-"] — 包含直接出现在空格字符之后的子字符串“status-”。类名由空格 per the html spec 分隔，因此是重要的空格字符。如果指定了多个类，这将检查第一个类之后的任何其他类， 并且 增加了检查第一个类的好处，以防属性值被空格填充（这可能发生在某些输出 @987654329 的应用程序中@ 属性动态）。
当然，这也适用于 jQuery，如 here 所示。
之所以需要如上所述组合两个属性选择器，是因为[class*="status-"] 之类的属性选择器会匹配以下元素，这可能是不可取的：
<div id='D' class='foo-class foo-status-bar bar-class'></div>
如果您可以确保这种情况永远不会发生，那么为了简单起见，您可以随意使用这种选择器。但是，上面的组合更加健壮。
如果您可以控制 HTML 源代码或生成标记的应用程序，则将 status- 前缀作为自己的 status 类而不是 as Gumbo suggests 可能更简单。
【讨论】：
如果出于某种奇怪的原因你有一个名为status- 的类并且你不想匹配它，选择器会变得更加复杂：div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-) 另外你失去了对 IE7/IE8 的支持。幸运的是，如果你的标记是理智的，你就不需要排除这样的类。
这有什么问题：[class*=" anim-overlay-"] a:hover:after...。我的 CSS 类是 anim-overlay-1, anim-overlay-2..... anim-overlay-8
@WebDevRon：你忘记了 ^= 部分。如果您的类属性保证以 anim-overlay- 开头，那么您可能不需要 *= 部分。
谢谢。还有一件事，我可以用这个.anim-overlay-*...吗？
@Daniel Compton：感谢您的编辑。事后看来，我已经意识到这样的词是如何屈尊俯就某人的，对他们来说，有些事情可能并不那么明显。我知道有些人真的不喜欢这种变化，所以我的回应主要是让你知道我喜欢。【参考方案2】：
CSS 属性选择器将允许您检查字符串的属性。 （在这种情况下 - 一个类名）
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
（看起来它实际上是 2.1 和 3 的“推荐”状态）
以下是我*认为它是如何工作的大纲：
[ ] : 是复杂选择器的容器如果你愿意...
class : 'class' 是您在这种情况下查看的属性。
* : 修饰符（如果有）：在这种情况下 - “通配符”表示您正在寻找任何匹配项。
test- ：属性的值（假设有一个） - 包含字符串“test-”（可以是任何值）
所以，例如：
[class*='test-']
color: red;
如果你有充分的理由，你可以更具体，也可以使用元素
ul[class*='test-'] > li ...
我试图找到边缘情况，但我认为没有必要使用 ^ 和 * 的组合 - 因为 * 得到了一切......
示例：http://codepen.io/sheriffderek/pen/MaaBwp
http://caniuse.com/#feat=css-sel2
IE6 以上的一切都会很高兴地服从。 :)
注意：
[class] ...
将选择任何具有类...
【讨论】：
[class*='test-'] 将匹配 <div class='foo-test-bar'> 等元素。这是我的回答中描述的需要结合 ^ 和 * 的一种极端情况。而且IE6不支持属性选择器。
@BoltClock - 感谢您的澄清！ - 我不支持
【参考方案3】：
你不能这样做。有一个 attribute selector 完全匹配或部分匹配，直到一个 - 符号，但它不会在这里工作，因为你有多个属性。如果您要查找的类名总是第一个，您可以这样做：
<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>
请注意，这只是为了指出哪个 CSS 属性选择器最接近，不建议假设类名总是在前面，因为 javascript 可以操纵属性。
【讨论】：
是的，想到了。当 jQuery 进入图片时，它可能会成为一个问题，因为它可能会在前面插入一个类。 是的，我会编辑我的帖子以明确说明这不是推荐的做法。如果您可以控制类名，那么 Gumbo 的建议肯定是可行的方法（不支持旧 IE 浏览器上的属性选择器）。【参考方案4】：这对于 CSS 选择器是不可能的。但是你可以使用两个类而不是一个类，例如status 和 important 而不是 status-important。
【讨论】：
将其分离到自己的类中是个好主意，但使用 CSS 选择器是可能的。看我的回答。以上是关于是否有按类前缀的 CSS 选择器？的主要内容，如果未能解决你的问题，请参考以下文章