CSS3：第n个孩子（奇数）选择器既不选择列也不行

-2

我有一个简单的表格，使用tr：nth-child（奇数）替换表格中的行的背景。CSS3：第n个孩子（奇数）选择器既不选择列也不行

HTML

/*-----------#602 SAO Styles-----------------------------*/ 
 

 
/*---------SAO Global------------*/ 
 

 
.sao-pricing-table table { 
 
    border-collapse: collapse; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background: #ffffff; 
 
} 
 
.sao-pricing-table table td { 
 
    height: 20px; 
 
} 
 
table.sao-table { 
 
    border-collapse: collapse; 
 
} 
 
/*-----Basic Title Cells---------*/ 
 

 
.sao-top-1 { 
 
    border: 0px; 
 
    background: #FFFFFF; 
 
    height: 40px; 
 
    width: 40%; 
 
} 
 
.sao-top-2 { 
 
    font-size: 16px; 
 
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); 
 
    color: #FFFFFF; 
 
    border: 0px solid #a8b5b9; 
 
    background-color: #003869; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    text-align: center; 
 
    height: 40px; 
 
    width: 30%; 
 
} 
 
.sao-top-2-title { 
 
    font-size: 110%; 
 
} 
 
.sao-top-2-type { 
 
    font-size: 120%; 
 
} 
 
.sao-top-2-price { 
 
    font-size: 100%; 
 
} 
 
/*------Gold Title Cells------*/ 
 

 
.sao-top-3 { 
 
    font-size: 16px; 
 
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3); 
 
    color: #FFFFFF; 
 
    border: 0px solid #a8b5b9; 
 
    background-color: #F2A405; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    text-align: center; 
 
    height: ; 
 
    width: 30%; 
 
} 
 
.sao-top-3-title { 
 
    font-size: 110%; 
 
} 
 
.sao-top-3-type { 
 
    font-size: 130%; 
 
} 
 
.sao-top-3-price { 
 
    font-size: 100%; 
 
} 
 
/*----Regular Cells-----*/ 
 

 
#sao-table table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
th, 
 
td { 
 
    padding: 0.25rem; 
 
    text-align: center !important; 
 
    border: 1px solid #ccc; 
 
    height: 20%; 
 
} 
 
tr.sao-zebra:nth-child(odd) { 
 
    background: #23282D !important; 
 
} 
 
.sao-feature { 
 
    text-align: left !important; 
 
} 
 
/* Checkmark Style-----*/ 
 

 
.sao-checkmark { 
 
    font-size: 125%; 
 
    color: #F2A405; 
 
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.2); 
 
}

<div class="sao-pricing-table"> 
 
    <table class="sao-table"> 
 
    <thead> 
 
     <tr> 
 
     <th class="sao-top-1"> 
 
     </th> 
 
     <th class="sao-top-2"> 
 
      <span class="sao-top-2-title">Some Text</span> 
 
      <span class="sao-top-2-type">More Text</span> 
 
      <span class="sao-top-2-price">Even More Text</span> 
 
     </th> 
 
     <th class="sao-top-3"> 
 
      <span class="sao-top-3-title">Some Text</span> 
 
      <span class="sao-top-3-type">More Text</span> 
 
      <span class="sao-top-3-price">Even More Text</span> 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <th class="sao-feature">Text</th> 
 
     <td class="sao-detail">Text</td> 
 
     <td class="sao-detail">Text</td> 
 
     </tr> 
 
     <tr> 
 
     <th class="sao-feature">Text</th> 
 
     <td class="sao-detail">Text</td> 
 
     <td class="sao-detail">Text</td> 
 
     </tr>

如看台上，表有3列。第n个子伪选择器导致每隔一列都是黑色的，而不是每隔一行。我做错了什么？编辑：建议的行跨度示例不包括第n个子选择器，因此我无法看到它是如何相同的。有人可以填补我吗？

来源

2016-09-30 gthadi

：第n-child' – dippas

可能的复制[如何获取css背景颜色标签跨越整个行]（http://stackoverflow.com/questions/5680753/how-to-get-css-background-color-on-tr-tag-to-span-entire- row） – LGSon

@dippas你真的可以关闭它作为一个愚蠢的，我投了赞成，并考虑删除我的答案...现在它成为一个维基 – LGSon

你在你选择一个空间，不应该有一个，就在:nth-child

tr.sao-zebra:nth-child(odd) { 
    background: #23282D; 
}

这是一个错字，你之前'有空间

来源

2016-09-30 15:26:23 JDandChips

已更改它，现在没有应用此选择器的样式。 – gthadi

@gthadi按预期工作。这是正确的答案，请参阅https://jsfiddle.net/sqma3qL1/请仔细检查您的代码。 – kremalicious

CSS3：第n个孩子（奇数）选择器既不选择列也不行

回答

相关问题