CSS - Как сопоставить класс (один динамический и один статический) между двумя элементами

Question

Я пытаюсь связать правило css между моим телом и последующим элементом div. Используя wordpress, мой элемент body имеет классы, определенные для себя на основе того, какая страница загружена. Я пытаюсь реализовать стиль, который по существу проверяет, присутствует ли автор classe (body.author-<*>), затем находит div с тем же именем класса и реализует конкретный стиль.

Я не могу использовать никакую встроенную функцию wordpress, так как список, содержащий указанный div (список авторов), динамически устанавливается в моем коде.

Кроме того, я надеялся избежать использования javascript, так как я хотел бы ограничить область применения этого изменения CSS, если это возможно.

Кроме того, поскольку в моем списке много пользователей, указание статического правила css для каждого пользователя, такого как body.author-user1 div.author-user1{}..., будет неудобно поддерживать, поскольку новые авторы могут быть добавлены позже, и я хотел бы ограничить любой будущий код изменить на чисто HTML.

Это возможно только с помощью css?

Answer 1

Вы можете использовать расширенный селектор CSS

body[class^="author"] {  }

Чтобы найти все тела, чьи классы начинаются с автора, а затем сделать то же самое для div

body[class^="author"] div[class^="author"] {  }

, однако я не знаюо т.е. совместимости для чего-либо ниже чем ie8.

Answer 2

Я не уверен, почему вы установили класс тела и внутренний класс на author-#.Кажется, что было бы разумнее просто добавить пронумерованный идентификатор к одному из них (учитывая, насколько уникальным является значение), а затем просто управлять этим элементом напрямую через CSS.

Я неконечно, если это все еще относится к вашему вопросу, но чтобы выполнить "проверку", чтобы увидеть, есть ли в вашем классе префикс author- , просто используйте селектор атрибута примерно так:*

body[class|=author] { ... }