如何区分CSS中的每个其他元素？

如何解决如何区分CSS中的每个其他元素？

请帮助我解决此CSS样式问题。

我有多个div标签，类为“ a”或“ b”。 而且我想区分每个带有“ a”类的第二个div标签的css样式，而不关心“ b”。

.a:nth-of-type(2n) {
  background-color: chocolate;
}

<div class="parent">
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="b">class b</div>
</div>

但是它不起作用，并且我的CSS总是在不关心.a或.b的情况下工作。 这是执行结果。

解决方法

这不是nth-child的工作方式，但是您可以使用~选择器来过滤第二次出现的类，然后为后面的任何其他操作重置CSS。

如果您的想法是每次选择一个班级，则每次从两个外观中选择一个 ，例如:nth-of-class(2n) （不可用），然后将需要Javascript 。

例如，将第二个.a或.b类放在单亲的流中，另一个类或元素是否介于两者之间。

div .a,div .b,.a~.a~.a,.b~.b~.b {
  background: #5f9ea0
}

.a~.a{
  background-color: chocolate;
}

.b~.b {
  background-color: orange;/* to avoid confusion ... */
}


/* demo purpose */

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(5em,1fr));
  grid-auto-rows: 4em;
  grid-gap: 1em;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
}

<div class="parent">
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="b">class b</div>
</div>

您的选择器：.a:nth-of-type(2n)并未在of-type上进行过滤，因为它仅获得选择器的类，它将匹配流中的任何2n标记，并且如果也具有CSS规则，则将应用CSS规则.a类。

,

第n个子伪类需要正确的参数。

自变量应采用+ b的形式，以匹配从b开始的所有ath子代。

a和b都是可选整数，都可以为零或负数。

如果a为零，则没有“ everth ath child”子句。 如果a为负，则从b开始向后进行匹配。 如果b为零或负数，则可以使用正数b写等效表达式，例如4n + 0与4n + 4相同。同样，4n-1与4n + 3相同。

您还可以看到：http://css-tricks.com/how-nth-child-works/

,

这是常见的误解 不幸的是，:nth-child和:nth-of-type css选择器不会查看"class"或其他任何东西进行计数。

他们只看其中一个

• （1）所有元素，或
• （2）某个“类型”的所有元素（不是类，不是属性，仅是元素的类型-div或li等）。

因此，如果您不知道确切的HTML结构，则无法使用纯CSS跳过它。 而且，如果需要这样做，可以使用Javascript。

我已经附加了基于Javascript的实现。

const elements = document.getElementsByClassName('a');

for (let index = 1; index < elements.length; index += 2) {
  elements[index].classList += " different";
}

.different {
  background-color: chocolate;
}

<div class="parent">
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="a">class a</div>
  <div class="b">class b</div>
  <div class="b">class b</div>
</div>