Селектор CSS для нескольких подэлементов

Скажем, у меня есть эта таблица:

<table class="live_grid">
    <tr>
        <td>
            <h3>Something!</h3>
        </td>
    </tr>
</table>

Если я хочу стилизовать <h3> в таблице, я могу использовать этот селектор CSS:

.live_grid h3 {

}

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

.live_grid h1,h2,h3,h4,h5,h6 {

}

Это похоже на заголовки, которые не входят в мою таблицу с классом live_grid.

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

Ответ 1

Стандартная опция:

Если вы хотите стилизовать все заголовки в этом классе, вы должны сделать это так (что также можно было бы сделать без разрывов строк). Обратите внимание, что в каждом селекторе есть .live_grid:

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

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

Например:

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

Это установит цвет текста для всего в элементе #myDiv1, все в элементе #myDiv2 и все в элементе .live_grid, чтобы цвет текста был синим.

Это также объясняет причину, по которой ваш CSS соответствует всем заголовкам - вы ссылаетесь на них отдельно, разделяя их запятыми - для их содержащих элементов нет селектора.

препроцессор CSS

Или вы всегда можете пойти с чем-то вроде LESS или SASS, который позволяет писать вложенные правила примерно так:

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

Пользовательский вариант класса

Наконец, вы можете добавить класс ко всем своим заголовкам и просто обратиться к этому классу:

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}

Ответ 2

Код

  .live_grid h1,h2,h3,h4,h5,h6 {}

будет выбирать только h1, который находится в .live_grid. Используйте

.live_grid h1,.live_grid h2,.live_grid h3,.live_grid h4,.live_grid h5,.live_grid h6 {}

От Адама Робертса " Селекторная группировка":

Мы можем рассматривать запятую как логический оператор OR, но важно помнить, что каждый селектор в группе является автономным. Общей ошибкой начинающих является запись таких групп:

#foo td, th {
⋮ declarations
}

Новичок может подумать, что указанный выше блок объявления будет применяться ко всем td и th элементам, которые являются потомками элемента с идентификатором "foo". Однако группа селекторов, приведенная выше, фактически эквивалентна этому:

#foo td {
⋮ declarations
 }
th {
⋮ declarations
}

Чтобы достичь истинной цели, напишите группу селекторов следующим образом:

 #foo td, #foo th {
 ⋮ declarations
 }

Ответ 3

.live_grid h1,
.live_grid h2,
...

вы получаете идею

Ответ 4

Попробуйте следующее:

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {}

Ответ 5

К сожалению, вам нужно настроить таргетинг на каждый заголовок отдельно или просто назначить ему класс.

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
}

Я бы просто назначил класс заголовку или был бы конкретным, какие заголовки вы на самом деле хотите настроить.

Ответ 6

каждый тег заголовка должен быть квалифицирован:

.live_grid h1, .live_grid h2, .live_grid h3, .live_grid h4, .live_grid h5, .live_grid h6

Ответ 7

Это одна из вещей, которая отвлекает CSS. Если вы хотите, чтобы CSS сосать меньше, вы можете использовать http://sass-lang.com/, и это будет выглядеть так:

.live_grid {
  h1, h2, h3, h4, h5, h6 {
    /* styles here */
  }
}

Ответ 8

 .live_grid h1,
 .live_grid h2,
 .
 .
 .

 .live_grid h6 { //now add your style here }

Ответ 9

Другим решением может быть добавление специального класса для каждого элемента h, который вы хотите использовать для разметки html, а затем в своем CSS вы можете написать нечто вроде этого:

 .live_grid .myHeader
  {
        /* your styling */
  }