如何选择选定伪类的伪类？答案

【问题标题】：How to select pseudo class of a selected pseudo class?如何选择选定伪类的伪类？
【发布时间】：2016-02-05 23:08:10
【问题描述】：

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

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

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

【问题讨论】：

每行只有一个徽标？
@dfsq 不，我每行有 4 个徽标

标签： html css css-selectors pseudo-class

【解决方案1】：

您将需要删除 :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>

【讨论】：

我是用span来对齐logo div中间的图片，所以span显示应该是inline-block，否则图片不会对齐。谢谢
哦，没错。如果是这种情况，您也应该包括在内。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：