tr:nth-child(четная) помощь. как подать заявку в один класс?

Я не очень хорош с CSS и мне нужна помощь.

У меня есть таблица, где я хочу, чтобы все остальные строки были серыми, а чередующиеся строки - белыми. но я хочу, чтобы это происходило только на одном конкретном столе.

Я добавил немного кода в мой CSS:

tr:nth-child(even) {  
background: #CCC;  
}  

tr:nth-child(odd) {  
background: #FFF;  
}

но проблема в том, что это влияет на каждую таблицу на моем сайте. Я не нашел примеров, когда это применимо только к определенному классу. Это возможно? Я хочу, чтобы это относилось только к:

table.dashboardtable
Источник

3 ответа

Решение

Используйте CSS-комбинатор потомков (сопоставление) как обычно:

table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(odd)
Источник

Надеюсь, что это имеет смысл.

<!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
      #customers tr:nth-child(even){
        background-color:white;
      }
      #customers tr:nth-child(odd){
        background-color:Lavender;
      }
    </style>
  </head>

  <body>
    <p>In your markup define your table:</p>
      <table id="customers"></table>
  </body>
</html>
Источник

nth-child а также nth-of-type принимать odd а также even а также формула как an+b, где a а также b являются постоянными.

Обычно вы хотите использовать nth-of-type, который будет применяться только к указанному вами типу. Это упустит другие элементы. Если вы хотите, чтобы у каждого четного tr был такой цвет фона, попробуйте:

tr:nth-of-type(2n){
  background: #CCC;
}

tr:nth-of-type(2n+1){
  background: #FFF;
}

Подробнее о CSS-селекторах

Источник
Другие вопросы по тегам