Question

我想隐藏几个类，类看起来像 .class-1, .class-2, .class-3..... .class-60等等。

我想隐藏所有class20s，class30s类并输入每个类行不是有效的方法

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

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

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

还是scss方式？

Answer 1

您可以随时使用:not() pseudo-class否定.class2和.class3：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，属性选择器[class^="class2"]将使用子字符串class2选择开始的类属性。如果您想要涵盖多个类并且class2不是第一个类的情况，那么它会变得有点复杂，因为您还需要考虑空白：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

例如：

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

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

＆＃13;

[class^="class2"],
[class^="class3"] {
  color: #f00;
}

.class2,
.class3 {
  /* Reset all styles back to their initial state */
  color: initial;
}

＆＃13;

<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>

＆＃13;

由于这些方法的不灵活性，因此也会选择具有class2-block类的元素，因为不会检查类的结尾。

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

例如，这是一个简单的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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

同样，您也可以使用以下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结果相同。

Answer 2

使用aAeEiI关于the 30 css selectors you must memorize的更多解释（从第10点开始在这种情况下开始变得有趣）

*=

/* get all divs with classes containing *class* */
div[class*=class] {
  border: solid 2px orange;
}

/* get all divs with classes containing *class2* */
div[class*=class2]{
  border: solid 2px green;
}

Answer 3

您可以使用nth-child CSS 属性来定位一系列元素。首先，我希望您将类值从class1 .. class60更改为类，原样如下：

<ul>
  <li class="class"></li> <!-- 1st item -->
  ...
  <li class="class"></li> <!-- 60th item -->
</ul>

然后，您可以使用以下 CSS 声明隐藏 20至39 中的li项。

li:nth-child(n+20):nth-child(-n+39) {
  display: none;
}

用于多个不同类名组合的CSS选择器

3 个答案: