有没有一种方法可以将html类名称指定为偶数（而不是奇数）以获取偶数css属性？

Question

我正在使用一个库，该库根据其 even 或 odd 指定给类的子级提供一些CSS属性，例如： / p>

HTML

<div class="parent">
<div class="child" > <div class="puppy">content Odd</div></div> 
<div class="child" > <div class="puppy">content Even</div></div>  
</div>

CSS

 .parent:nth-child(even) .child {
                   css attributes: whatever;
                   ...
                   }
.parent:nth-child(even) .child .puppy{
                   css attributes: whatever;
                   ...
                   }
.parent:nth-child(odd) .child {
                   css attributes: whatever;
                   ...
                   }
.parent:nth-child(odd) .child .puppy{
                   css attributes: whatever;
                   ...
                   }

如何将子类指定为偶数而不是奇数，不使用用!important覆盖所有CSS属性。

说明：

  

[所以]您有一个库在为偶数和奇数子代应用替代样式，但是您想对所有样式进行设置，就好像它们都是偶数子代一样？

  .puppy:nth-child(odd) {
  background: SpringGreen ;
  margin-left: auto;
  margin-right: 30;
}

    
 .puppy:nth-child(even){
  background: Teal ;
  margin-left: 30;
  margin-right: auto;
  color: azure;  
}
.yop{
 width: 400px;
 height: 700px;
 margin: 0 auto;
 border: 4px solid LightGrey ;
  box-shadow: 8px 8px LightGrey ;
}
.puppy{
  padding: 5px;
  margin: 15px;
  border: 2px solid grey;
  display:table;
  font-size: 18
}

<div class="yop">
 <div class="puppy">
 content<strong> Odd</strong>
 </div>
<div class="puppy">content<strong> Even</strong></div>
<div class="puppy">content <strong>Odd</strong></div> 
<div class="puppy">content<strong> Even</strong></div>
<div class="puppy">content <strong>Odd</strong></div> 
<div class="puppy">content<strong> Even</strong></div>
 <div class="puppy">content <strong>Odd</strong></div> 
<div class="puppy">content<strong> Even</strong></div>
</div>

上面是一个代码示例：如何在不覆盖现有CSS的情况下并在每个位置放置！important的方式将puppy div标记为偶数，以便它们处于相同的位置（与“ content even” divs相同）。

Answer 1

这是通过CSS设置奇数和偶数子代的简单方法。希望有帮助！

.parent .child > div {
  background: red;
  padding: 5px;
  border-bottom: 1px solid black;
}

.parent .child:nth-child(2n) > div {
  color: #fff;
}

<div class="parent">
<div class="child" > <div class="puppy">content Odd</div></div> 
<div class="child" > <div class="puppy">content Even</div></div>
<div class="child" > <div class="puppy">content Odd</div></div> 
<div class="child" > <div class="puppy">content Even</div></div>  
</div>

Answer 2

您在错误的元素上使用了nth选择器。您需要将其移至.child

 .parent .child:nth-child(even) {
                                css attributes: 
                                ...
                                 }
.parent .child:nth-child(even) .puppy{
                               css attributes: 
                                ...
                                 }
.parent .child:nth-child(odd) {
                              css attributes: 
                                ...
                                 }
.parent .child:nth-child(odd) .puppy{
                              css attributes: 
                                ...
                                 }

您正试图影响child元素。示例中的内容是选择parent元素。