具有相邻类限制的css匹配选择器
当我想要匹配一个在同一元素上也有另一个类my-other-class-a的特定类my-class-b时，我可以这样做
.my-class-b.my-other-class-a {
}另外，当我想要通过部分类名进行匹配时，我可以使用
[class^="my-class-"] {
}现在我想混合这两种方法，但它似乎不起作用。我该怎么做？
[class^="my-class-"].my-other-class-a {
}回答 3
Stack Overflow用户
发布于 2015-07-20 04:24:44
这是因为从css选择器[class^="abc"]中指定的类开始测试class属性。
如果选择器是
[class^="my-"]然后
class="my-class red"不同于
class="red my-class"在http://jsfiddle.net/u5sfge94/上查看它
解决这个问题的一种方法是指定一个新的类作为class^="abc“。它可能会使您的样式表更有条理，代码更易读，css呈现速度更快。
Stack Overflow用户
发布于 2015-07-20 05:28:12
在前面的答案中对@juank的解释是正确的:编写类的顺序很重要，因为^代表值的开始。
但是还有许多其他使用正则表达式的属性选择器：^=、*=和$=；for以，anywhere开始，以匹配结束。
如果希望选择器与包含my-class的类匹配，则应该使用*= (请参阅代码段1)。
但是，它也会匹配任何不是以my-class开头但仍然包含它的类。为了避免这种情况，您可以像以前对^=所做的那样进行匹配，也可以匹配[class*=" my-class"] (带有空格)：它将考虑到它不是写入属性的值中的第一个类的情况(请参见2)。
资源: CSS3.info上的 CSS3 Substring Matching Attribute Selectors (链接到最后的REC CSS level 3选择器)
代码片段1:
[class*='my-class'].my-other-class-a {
background-color: lightgreen;
}<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>
代码片段2:
[class^='my-class'].my-other-class-a,
[class*=' my-class'].my-other-class-a {
background-color: lightgreen;
}<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>
Stack Overflow用户
发布于 2015-07-20 04:21:34
它并不是万无一失的，但只要你的“变量”类是第一个，它就可以工作：
div[class^='my-class'][class~='my-other-class-a'] {
background-color: red;
}<div class="my-class-a my-other-class-a">Hello</div>
<div class="my-class-b my-other-class-a">World</div>
<div class="my-other-class-a">Bye</div>
https://stackoverflow.com/questions/31505489
复制相似问题
腾讯云开发者
