Html 类选择器，类以选择器开始

我想将类选择器（如

.smart

与

[attr^=val]

选择器组合，其

attr

是一个

类

，如

[class^='test-']

）。我已经分别测试了每一个选择器，它们似乎工作得很好。然而，当它们结合在一起时，无法产生预期的结果

例子 你也可以

/*有效*/
[class^='test-']{
背景：蓝色；
}
/*工作*/
.聪明{
背景：黄色；
}
/*不起作用*/
[class^='test-'].smart{
背景：红色；
}

应该是蓝色的

应该是黄色的

应该是红色的，但不是

为什么CSS选择器

[class^='test-'].smart

不起作用

因为类属性不是以

test-

开头的。它以

smart

开头。如果它确实以

test-

开头，如下所示：

<div class="test-me smart">
  <p>Should be red.</p>
</div>

应该是红色的

也应该是红色的

您需要更改此格式的CSS:-

只需更改^by*

[class*='test-'].smart {
  background: red;
}

---

这不是对你具体问题的直接回答。其他答案也不错

但是，我不建议使用这种方法来命名具有内部结构的类，然后必须使用属性选择器来区分这些类。属性选择器使您能够查找其值以字符串（

^=

）开头、包含字符串（

*=

）、包含某个标记（

~=

）或其值为前缀字符串（

^=

）的任何属性，但不要找到一个属性，该属性的值是一个令牌列表，其中任何一个都有一个特定的前缀，这就是您想要的。因此，正如其他答案所解释的，你不得不说

[class^="test-"], [class*=" test-"]

那很难看，也不是很干。此外，如果您担心性能，CSS引擎将需要做更多的工作。相反，CSS引擎经过高度优化，可以进行常规的类匹配

因此，我建议您采用单独类的方法，

test

和

me

。HTML显然看起来像

。CSS将为所有类型的测试通用的所有属性指定

.test{}

，并为特定于

me

的属性指定

.test.me{}

如果您担心

me

可能与代码中其他地方类似命名的类冲突，那么您可以将其“命名空间”为“testme”，并将HTML指定为

，将CSS指定为

.test{}

和

.test me{}

是的，这需要在HTML中增加几个字节。但是在压缩和缓存之后，即使对于一百万用户来说，一年内下载这些内容的成本也可能是可以忽略不计的

但事实上，

testme

比HTML中的

testme

更冗长。然而，我认为前者最终更具可读性和语义。想想这个可怜的家伙从一年后接管你的代码。如果他想找到应用于

testme

的样式，他可能会在CSS中搜索

.testme

格式的类。他可能不会偶然发现影响此元素的另一条规则

如果您查看引导，请注意它们不会对类使用属性选择器，例如

col-md-3

。这样做效率太低了。相反，在运行时应用的规则明确地命名了所有可能性：

.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
  float: left;
}

当然，在Bootstrap的情况下，它们不会在源代码中写出所有这些类；它们使用SASS在编译时生成它们。这也是一个你可以考虑的选项，如果你愿意使用SASS或其他预处理器，或者已经这样做了。 另一个有用的参考点是图标库，它允许您使用类似

<i class="icon-cloud"></i>

这至少在性能方面不会太差。但是，其他图标库使您可以显式指定另一个类，该类仅指示图标本身的属性：

<i class="icon icon-cloud"></i>

---

这将尽可能快。

因为

“智能测试我”

不是以

测试-

开头的。。。嗯D@NiettheDarkAbsol是的，但是，如果我将这两个类进行置换，这会起作用吗？如果你将

^

更改为

*

，它会起作用。@pol如果你将它更改为

*

，你也会匹配

foo测试条

@pol:是的，但是在contains选择器的值前面的空格应该可以解决这个问题。啊，你回答得比我快。^@Harry:老实说，我不妨把这个问题标为一个重复的问题。从我最初的答案中的类型选择器到这个问题中的类选择器，不需要经历太多的困难。这正是我所寻找的解决方案。我觉得有点傻，因为我没有意识到以开头实际上意味着以开头，而不是包含以开头的子字符串，但我现在可以看出这是多么明显。谢谢你的帮助！但是为了完整性，您应该指出，整个设计方法都有缺陷。将内部结构构建到类名中并不是一个好主意，然后尝试以这种方式使用属性选择器来区分这些类名。@torazaburo好吧，我有大约20个类，从同一个字符串开始，在最末端有两个数字不同（构建网格系统），所以我希望某些东西是一样的，不管最后两位数是多少。因此，我尝试使用此选择器组合来节省一些空间。这将匹配

class=“foo test bar”

。无论我是否投票或投票方式都是无关的。我不需要检查你的代码。我可以通过查看它来判断，它将选择一个类为“foo test bar”的元素，而它不应该这样做。@torazabu

<i class="icon icon-cloud"></i>

.icon { font-family: MyCoolIconFont; }