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

时间:2015-11-05 07:46:18

标签: html css css-selectors pseudo-class

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



.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>
&#13;
&#13;
&#13;

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

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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>

答案 2 :(得分:1)

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