Question

例如，是否可以为以下类使用一个选择器

.bikes-panel, .cars-panel, .trucks-panel 这样你就有了一个看起来像

的选择器

.?????panel{ css code goes here}

Answer 1

U + 0020 SPACE，“tab”（U + 0009），“LF”（U + 000A），“FF”（U + 000C）和“CR”（U + 000D）

然后，如果要选择包含以-panel结尾的类的所有元素，可以使用选择器

[class$="-panel"], [class*="-panel "], [class*="-panel\9"],
[class*="-panel\a"], [class*="-panel\c"], [class*="-panel\d"]

它会选择class属性以-panel结尾或包含-panel后跟类分隔符的所有元素。

[class$="-panel"], [class*="-panel "], [class*="-panel\9"],
[class*="-panel\a"], [class*="-panel\c"], [class*="-panel\d"] {
  color: blue; 
}

<div class="foo">foo</div>
<hr />
<div class="foo bar-panel">foo bar-panel</div>
<div class="bar-panel foo">bar-panel foo</div>
<div class="foo bar-panel bar">foo bar-panel bar</div>
<hr />
<div class="foo&#x9;bar-panel">foo&amp;#x9;bar-panel</div>
<div class="bar-panel&#x9;foo">bar-panel&amp;#x9;foo</div>
<div class="foo&#x9;bar-panel&#x9;bar">foo&amp;#x9;bar-panel&amp;#x9;bar</div>
<hr />
<div class="foo&#xa;bar-panel">foo&amp;#xa;bar-panel</div>
<div class="bar-panel&#xa;foo">bar-panel&amp;#xa;foo</div>
<div class="foo&#xa;bar-panel&#xa;bar">foo&amp;#xa;bar-panel&amp;#xa;bar</div>
<hr />
<div class="foo&#xc;bar-panel">foo&amp;#xc;bar-panel</div>
<div class="bar-panel&#xc;foo">bar-panel&amp;#xc;foo</div>
<div class="foo&#xc;bar-panel&#xc;bar">foo&amp;#xc;bar-panel&amp;#xc;bar</div>
<hr />
<div class="foo&#xd;bar-panel">foo&amp;#xd;bar-panel</div>
<div class="bar-panel&#xd;foo">bar-panel&amp;#xd;foo</div>
<div class="foo&#xd;bar-panel&#xd;bar">foo&amp;#xd;bar-panel&amp;#xd;bar</div>
<hr />
<div class="foo&#xf;bar-panel">foo&amp;#xf;bar-panel</div>
<div class="bar-panel&#xf;foo">bar-panel&amp;#xf;foo</div>
<div class="foo&#xf;bar-panel&#xf;bar">foo&amp;#xf;bar-panel&amp;#xf;bar</div>

Answer 2

*[class$="-panel"]将执行您正在寻找的内容，但前提是。??? - 面板是类属性中指定的最后一个类。

Answer 3

修改：要获得最准确的答案，请参阅https://stackoverflow.com/a/37646760/3815374

目前大多数建议都有限制。它们要求类是最后一个（如果使用JavaScript，可能并不总是如此）或者它们选择太多。 IMO最好的就是使用它：

[class*=-panel]:not([class*=panel-])

Answer 4

你有没有想过让面板成为一个班级，然后将物品（自行车，汽车，卡车）变成id？

例如

    .panel{
code goes here
}

    #bikes{
code goes here
}

    #cars{
code goes here
}

    #trucks{
code goes here
}

希望这有用。

如果你想使用伪类，我想你可以简单地将它们全部称为

.panel:nth-child(specify which child){
code goes here
}

我应该使用什么css伪类来捕获具有特定命名模式的类？

4 个答案: