如何选择所选伪类的伪类？

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选择器似乎无法正常工作。这有什么问题？

Answer 1

您的选择器中有空格。从每个选择器中的.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; } 中删除空格：

{{1}}

Answer 2

您需要删除:nth-child选择器的空间，并使用display: inline-block而不是row logo而不是范围。默认情况下，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>

Answer 3

在CSS代码中，您可以使用空格编写.row :nth-child(even)。正确的语法是.row:nth-child(even)，没有空格。

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