如何 select 伪 class 的 selected 伪 class？

Question

我有一个由行组成的容器。每行都有一个徽标元素，我希望徽标背景像棋盘一样。这是一行的示例：

.content-designers .designers > .row  > .logo > span{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}    
.content-designers .designers .row :nth-child(odd) .logo:nth-child(odd){
  background: #f4f4f4;
}    
.content-designers .designers .row :nth-child(odd) .logo:nth-child(even){
  background: #fff;
}
.content-designers .designers .row :nth-child(even) .logo:nth-child(odd){
  background: #fff;
}
.content-designers .designers .row :nth-child(even) .logo:nth-child(even){
  background: #f4f4f4;
}

<div class="content-designers">
  <div class="designers">
    <div class="row">
      <div class="logo"> 
        <span></span>
        <img src="">
      </div>
      <div class="logo"> 
        <span></span>
        <img src="">
      </div>
      <div class="logo"> 
        <span></span>
        <img src="">
      </div>
      <div class="logo"> 
        <span></span>
        <img src="">
      </div>       
    </div>
  </div>
</div>

选择器似乎不起作用。这里有什么问题？

Answer 1

您的选择器中有 space 个。从每个选择器的 .row :nth-child 中删除 space：

.content-designers .designers > .row  > .logo > span{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}    
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd){
  background: #f4f4f4;
}    
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even){
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd){
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(even){
  background: #f4f4f4;
}

Answer 2

在 CSS 代码中，您写 .row :nth-child(even)，然后 space。正确的语法是 .row:nth-child(even) 没有 space.

.content-designers .designers > .row  > .logo > span{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
} 
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd){
  background: #f4f4f4;
}
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even){
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd){
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(even){
  background: #f4f4f4;
}

<div class="content-designers">
  <div class="designers">
    <div class="row">
      <div class="logo">   
        <span></span>
        <img src="">
      </div>
      <div class="logo">    
        <span></span>
        <img src="">
      </div>
      <div class="logo">    
        <span></span>
        <img src="">
      </div>
      <div class="logo">   
        <span></span>
        <img src="">
      </div>
    </div>
  </div>
</div>

Answer 3

您需要为 :nth-child 选择器删除 space 并为 row logo 使用 display: inline-block 而不是跨度。 row logo 默认情况下充当块级元素并将新行对齐到新行。

.content-designers .designers > .row > .logo > span {
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
.content-designers .designers .row .logo {
  display: inline-block;
  padding: 10px;
}
.content-designers .designers .row:nth-child(odd) .logo:nth-child(odd) {
  background: #f4f4f4;
}
.content-designers .designers .row:nth-child(odd) .logo:nth-child(even) {
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(odd) {
  background: #fff;
}
.content-designers .designers .row:nth-child(even) .logo:nth-child(even) {
  background: #f4f4f4;
}

<div class="content-designers">
  <div class="designers">
    <div class="row">
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
    </div>
    <div class="row">
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
    </div>
    <div class="row">
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
    </div>
    <div class="row">
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
      <div class="logo">
        <span></span>
        <img src="">
      </div>
    </div>
  </div>
</div>

如何 select 伪 class 的 selected 伪 class？

How to select pseudo class of a selected pseudo class?

html

css

css-selectors

pseudo-class