Применение стиля CSS к элементу ID, когда начало его имени остается идентичным, а конец меняется

Question

В WordPress заголовок сообщения в блоге обычно форматируется с использованием элемента ID, состоящего из префикса, такого как «post», который никогда не изменяется, за которым следует переменный числовой суффикс, сгенерированный WordPress, соответствующий порядковому номеру записи, который уникален для каждого поста.

В файле single.php темы WordPress, используя html 5 (но проблема та же, что и в HTML 4), код заголовка записи блога будет выглядеть следующим образом:

<article id="post-<?php the_ID(); ?>" role="main">

Это генерирует следующий HTML, скажем:

<article id="post-5434">

У меня возникают трудности с применением стиля к идентификатору, потому что, если я не ошибаюсь, кажется, что нет способа применить стиль к элементу, когда часть его имени меняется. В этом случае мне нужно стилизовать идентификатор следующим образом:

#post-[sequential number] {
    position: relative;
}

#post-[sequential number] blockquote,#post-[sequential number] ul,#post-[sequential number] ol {
    color: #555;
    margin: 0 14px 5px;
    line-height: 1.5;
}

#post-[sequential number] ul li,.entry ul li {
    list-style-type: disc;
    margin: 0 20px 5px;
}

#post-[sequential number] ol li {
    list-style: decimal;
    margin: 0 20px 5px;
}

#post-[sequential number] blockquote {
    font-style: italic;
    border-left: 1px solid #ccc;
    margin-left: 21px;
    padding-left: 10px;
}

для применения перечисленных выше стилей к потомкам идентификатора # post- [порядковый номер].

В этом случае добавление класса (скажем, <article id="post-[sequential number]" class="blog-post"> к идентификатору не будет работать, поскольку position:relative необходимо применить к элементу блока.

Конечно, этого результата можно легко достичь, добавив дополнительный элемент блока (скажем, <div class="blog-post">) между # post- [порядковым номером] и его потомками и применив к нему нужные стили. Но весь смысл использования html 5 состоит в том, чтобы удалить ненужные элементы div, чтобы сделать их более семантическими, поэтому я хотел бы найти решение, которое работает без этого.

Я сохранил рабочую копию простых файлов index.html и style.css (без разметки WordPress) в моей песочнице, которые отражают приведенное выше описание (т. Е. С идентификатором '# post-5434' в html). и #post (с 'position: absolute') в css): к ним можно получить доступ здесь . Как видите, очевидно, что желаемые стили не применяются к потомкам blockquote и ul.

UPDATE Есть три возможных решения, все одинаково действительны и уместны в определенных обстоятельствах. Смотри ниже.

Answer 1

Вы можете выбрать сообщения, используя div[id*='post-'] { ... } или даже лучше div[id^='post-'] { ... }

Первый выберет все элементы div с идентификатором, который содержит значение в кавычках.Второй выберет все элементы div с id, которые начинаются со значения в кавычках.

Пример: http://jsfiddle.net/Lx8tW/2/

Answer 2

@ Ответ Сотириса - путь в CSS.Однако, если вы можете редактировать свою тему WordPress, вы можете добавить class="post" в HTML, например,

<article class="post" id="post-<?php the_ID(); ?>" role="main">

. Чтобы создать этот HTML:

<article class="post" id="post-5434">

Затем используйте класс в вашемCSS:

.post {
    position: relative;
}

/* and so on... */

Этот CSS имеет преимущество работы в IE 6.

Редактировать:

В этом случае добавлениекласс (скажем, <article id="post-[sequential number]" class="blog-post"> к идентификатору) не будет работать, так как position:relative должен быть применен к элементу блока.

<article> является элементом уровня блока.Если это не отображается в вашем браузере, вставьте это в ваш CSS-файл:

article {
    display: block;
}

Сбрасываемые стилевые таблицы с поддержкой HTML5, такие как Eric 10 * *, делают это.

Answer 3

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

<?php post_class(); ?>

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