CSS选择器，用于多个不同的类名组合 [英] CSS selector for multiple different class name combinations

问题描述

我想隐藏一些课程，这些课程看起来像 .class-1, .class-2, .class-3..... .class-60，依此类推.

I want to hide a few classes and the classes look like .class-1, .class-2, .class-3..... .class-60 and so on.

我想隐藏所有class20s，class30s类并键入每行内容不是一种有效的方法

I want to hide all class20s, class30s classes and typing each class line is not efficient way to do

.class21,
.class22,
.class23 {
  display: none;
}

我想知道是否可以选择下面的类，但是如果我使用下面的类，则选择class2和class3.

I'd like to know is it possible to select classes like below, but if I use something like below, class2 and class3 is selected.

[class^="class2*"],
[class^="class3*"] {
 display: none;
}

还是scss方式?

推荐答案

您始终可以使用

You could always negate .class2 and .class3 using the :not() pseudo-class:

[class^="class2"]:not(.class2),
[class^="class3"]:not(.class3) {
  color: #f00;
}

[class^="class2"]:not(.class2),
[class^="class3"]:not(.class3) {
  color: #f00;
}

<div class="class1">don't select</div>
<div class="class2">don't select</div>
<div class="class3">don't select</div>
<div class="class4">don't select</div>

<div class="class21">select</div>
<div class="class22">select</div>
<div class="class23">select</div>
<div class="class24">select</div>

<div class="class31">select</div>
<div class="class32">select</div>
<div class="class33">select</div>
<div class="class34">select</div>

请记住，属性选择器[class^="class2"]将使用子字符串class2选择类属性 starting .如果要涵盖存在多个类且class2不是第一类的情况，那么它会变得有点复杂，因为您还需要考虑空格:

Keep in mind that the attribute selector [class^="class2"] will select class attributes starting with the substring class2. If you want to cover cases where there are multiple classes and class2 isn't the first class, then it gets a little complex because you also need to account for whitespace:

[class^="class2"]:not(.class2),
[class*=" class2"]:not(.class2),
[class^="class3"]:not(.class3),
[class*=" class3"]:not(.class3) {
  color: #f00;
}

[class^="class2"]:not(.class2),
[class*=" class2"]:not(.class2),
[class^="class3"]:not(.class3),
[class*=" class3"]:not(.class3) {
  color: #f00;
}

<div class="another class1">don't select</div>
<div class="another class2">don't select</div>
<div class="another class3">don't select</div>
<div class="another class4">don't select</div>

<div class="another class21">select</div>
<div class="another class22">select</div>
<div class="another class23">select</div>
<div class="another class24">select</div>

<div class="another class31">select</div>
<div class="another class32">select</div>
<div class="another class33">select</div>
<div class="another class34">select</div>

您也可以只选择所有.class2*/.class3*组合，然后将.class2/.class3的CSS覆盖回到其初始状态.

You could alternatively just select all .class2*/.class3* combinations, and then override the CSS for .class2/.class3 back to their initial state.

例如:

[class^="class2"],
[class^="class3"] {
  color: #f00;
}

.class2,
.class3 {
  /* Reset all styles back to their initial state */
  color: initial;
}

[class^="class2"],
[class^="class3"] {
  color: #f00;
}

.class2,
.class3 {
  /* Reset all styles back to their initial state */
  color: initial;
}

<div class="class1">don't select</div>
<div class="class2">don't select</div>
<div class="class3">don't select</div>
<div class="class4">don't select</div>

<div class="class21">select</div>
<div class="class22">select</div>
<div class="class23">select</div>
<div class="class24">select</div>

<div class="class31">select</div>
<div class="class32">select</div>
<div class="class33">select</div>
<div class="class34">select</div>

由于这些方法的灵活性，由于未检查类的结尾，因此还将选择具有诸如class2-block之类的元素.

Due to how inflexible these approaches are, elements with a class such as class2-block will also be selected since the end of the class isn't being checked.

话虽如此，使用CSS预处理器生成组合可能会更安全.

With that being said, it may be safer just to use a CSS preprocessor to generate the combinations.

例如，这是LESS中的一个简单循环:

For instance, here is a simple loop in LESS:

.class39 {
  color: #f00;
}

@iterations: 38;
.loop (@i) when (@i > 19) {
  .class@{i}:extend(.class39) {}
  .loop(@i - 1);
}
.loop (@iterations);

将编译为:

.class39, .class38, .class37, .class36, .class35, .class34, .class33,
.class32, .class31, .class30, .class29, .class28, .class27, .class26,
.class25, .class24, .class23, .class22, .class21, .class20 {
  color: #f00;
}

.class39, .class38, .class37, .class36, .class35, .class34, .class33,
.class32, .class31, .class30, .class29, .class28, .class27, .class26,
.class25, .class24, .class23, .class22, .class21, .class20 {
  color: #f00;
}

<div class="class1">don't select</div>
<div class="class2">don't select</div>
<div class="class3">don't select</div>
<div class="class4">don't select</div>

<div class="class21">select</div>
<div class="class22">select</div>
<div class="class23">select</div>
<div class="class24">select</div>

<div class="class31">select</div>
<div class="class32">select</div>
<div class="class33">select</div>
<div class="class34">select</div>

同样，您也可以使用以下SCSS:

Likewise, you could also use the following SCSS:

$count: 20;

%class-list {
  color: #f00;
}

@mixin class-loop {
  @for $i from 39 through $count {
      .class#{$i} { @extend %class-list; }
  }
}

@include class-loop;

编译结果与LESS结果相同.

Which would compile to the same as the LESS results.

这篇关于CSS选择器，用于多个不同的类名组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！