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

Question

Вот страница, на которую я влияю: http://www.careerchoiceswithlaura.com/blog/

Проверка элементов покажет, что я настроил один класс "блог-пост" и добавил его к каждой записи на странице.Затем я использую простой алгоритм для применения класса с четными или нечетными номерами, а также для соответствующих записей, чтобы я мог поразить цветовые эффекты и сделать страницу более читабельной.

Проблема в том, что когда я применяю правила, используя следующую строку в моем CSS-файле:

.blog-post .odd-numbered { background: #ddd; }

.., это не влияет на элементы как поста блога, так и нечетногопронумерованы;на самом деле, правило ничего не влияет на страницу.

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

Я исследовал в Интернете и нахожу эту статью на W3 обычно очень полезной (и похоже, что правило должно работать, если вы посмотрите на / blog /: 279 на странице, которую я упомянул выше), но даже с этим правилом, похоже, нет ничего для элементов, на которые я пытаюсь нацелиться.

Answer 1

Ваш пример селектора предназначается для элементов с классом odd-numbered, которые имеют элемент-предок с классом blog-post.

В вашем HTML элемент .blog-post также является элементом .odd-numbered.

Ваш селектор должен быть .blog-post.odd-numbered (обратите внимание на отсутствие пробела).

Answer 2

Чтобы стилизовать один и тот же элемент с двумя именами классов, вы захотите (без пробела):

.blog-post.odd-numbered { background: #ddd; }

Ваш оригинальный стиль с пробелом стилизует элемент с классом odd-numbered внутри элемент с классом blog-post

Answer 3

Вам понадобятся следующие псевдоселекторы CSS:

elementname:nth-child(even)

и

elementname:nth-child(odd)

Документация: http://www.w3.org/Style/Examples/007/evenodd

Answer 4

из CSS3

:nth-child(odd)

Answer 5

Вы должны подать заявление как .blog-post.odd-numbered { background: #ddd; } без пробелов между классами CSS, если оно применяется к тому же элементу.