使用CSS来针对任何有两个类的元素?
我们的生产环境使用的是与多个css类不兼容的自适应技术。这意味着在设计HTML样式时很容易忘记并使用两个类,一旦进入生产环境,它们就会被破坏 我想使用CSS作为一种方式来突出显示当有人忘记并意外地将两个类应用于一个元素时 这是我的意图,当然这是无效的。它应该突出显示应用了两个类的任何元素:使用CSS来针对任何有两个类的元素?,css,css-selectors,Css,Css Selectors,我们的生产环境使用的是与多个css类不兼容的自适应技术。这意味着在设计HTML样式时很容易忘记并使用两个类,一旦进入生产环境,它们就会被破坏 我想使用CSS作为一种方式来突出显示当有人忘记并意外地将两个类应用于一个元素时 这是我的意图,当然这是无效的。它应该突出显示应用了两个类的任何元素: .*.* { /* not valid (I wish) */ outline:2px dotted red; } 我知道如果我知道这些类,这会起作用,问题是我想标记任何两个类: .classA.c
.*.* { /* not valid (I wish) */
outline:2px dotted red;
}
我知道如果我知道这些类,这会起作用,问题是我想标记任何两个类:
.classA.classB { /* not good enough */
outline:2px dotted red;
}
我知道我可以用JS和bookmarklet来实现这一点,也许这是唯一的解决方案。如果只使用CSS是可能的,那会更好,因为它会自动为所有开发人员和QA标记内容。这不可能单独使用CSS
而且,如果我可以这么说的话,您的生产环境是愚蠢的。没有多个类的CSS就像一个标签云,每个项目只允许一个标签。它违背了某些目的。修复您的生产环境,使其不会以这种方式滥用CSS,而不是限制您的作者正确地、语义地描述内容。我刚刚找到了一个可以接受的答案:
[class*=" "] {
outline:2px dotted red;
}
这将突出显示class属性中带有空格的任何内容。它会得到一些误报,因为有时类属性中的空格是由于服务器端代码易读而合法发生的,但我更喜欢误报而不是误报
有更好的主意吗?要消除大多数误报(如空格填充的属性值),可以使用此选择器:
[class*=" "]:not([class^=" "]):not([class$=" "]) {
outline: 2px dotted red;
}
正如Phrogz在您自己的回答中指出的那样,这仍然不能过滤掉值中重复的类,例如
class=“foo foo”
,但总比没有好,我认为这比使用空格填充的类属性发生的可能性要小得多。我不认为CSS具有这种功能。最简单的方法是使用jquery查找class属性包含空格的任何元素,我认为JS是唯一的解决方案;为什么不使用JS?你能说吗?CSS更容易干净地添加和删除。不过JS也可以,我不反对。我们正在使用日本内容改编系统,使我们的网站在Keitai移动设备上运行。选项不多。请注意(可能不太可能,因此可以接受)这也会标记class=“foo foo”
,它实际上只应用了一个类。