CSS3: nth-child (нечетный) Селектор не выбирает столбцы или строки

-2

У меня есть простая таблица с использованием tr: nth-child (нечетное) для чередования фона для строк в таблице.CSS3: nth-child (нечетный) Селектор не выбирает столбцы или строки

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 колонки. Псевдо-селектор nth-child заставляет каждый столбец быть черным, а не каждой другой строкой. Что я сделал не так? Изменить: пример для диапазона строк, который был предложен, не включает селектор nth-child, поэтому я не вижу, как он тот же. Может ли кто-нибудь меня наполнить?

источник

2016-09-30 gthadi

, что это опечатка, то есть пространство непосредственно перед ': п-child' – dippas

Возможный дубликат [Как чтобы получить цвет фона css на значке , чтобы охватить всю строку] (http://stackoverflow.com/questions/5680753/how-to-get-css-background-color-on-tr-tag-to-span-entire- строка) – 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: nth-child (нечетный) Селектор не выбирает столбцы или строки

ответ

Смежные вопросы