CSS -如何在两个元素之间匹配class(一个动态的和一个静态的)


CSS - How to match class (one dynamic and one static) between two elements

我试图在body和随后的div元素之间绑定一个css规则。使用wordpress,我的body元素根据加载的页面为自己定义了类。我试图实现一种样式,本质上检查类作者是否存在(body.author-<*>),然后找到具有相同类名的div并实现特定的样式。

我不能使用任何内部wordpress函数,因为包含上述div(作者列表)的列表是在我的代码中动态设置的。

同样,我希望避免使用javascript,因为如果可能的话,我想限制CSS的范围。

此外,由于我的列表中列出了许多用户,因此为每个用户指定静态css规则(例如body.author-user1 div.author-user1{}...)将是令人讨厌的,因为以后可能会添加新的作者,并且我希望将任何未来的代码更改限制为纯html。

这是可能的只有css吗?

你可以使用高级css选择器

正文[class^="author"] {}

查找类以author开头的所有主体,然后对div

执行同样的操作<>之前身体[类^ = "作者"]div[类^ = "作者"]{}之前

但是我不知道ie的兼容性低于ie8

我不知道为什么你会设置两个主体类和内部类author-#。似乎最合理的做法是给其中一个元素添加一个编号的ID(考虑到它的值有多独特),然后直接通过CSS控制该元素。

我不确定这是否仍然属于你的问题,但做"检查",看看是否作者-前缀是在你的类,只是使用一个属性选择器,像这样:

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