CSS调整其子级确实具有类的元素的样式

Question

是否有一种纯CSS方式来调整元素的样式，其中唯一的子元素没有类？

例如：

<a><img class="avatar pro"></a>
<a><img class="avatar"></a>

我只想用“pro”类来包含一个包含孩子的“a”？

背景如下： 在Buddypress中，你有一个钩子来为头像添加一个类：

add_filter( 'bp_core_avatar_class', 'filter_bp_core_avatar_class', 10, 4 );

但是，因为：在/：after-pseudo-classes之前不能处理图像，我需要能够调整包装容器。

谢谢！ 圣拉斐尔

Answer 1

不，目前在CSS中没有父选择器。以下是对它的讨论：https://css-tricks.com/parent-selectors-in-css/

但是，如果您使用的是Buddypress，jQuery会自动使用它。您可以将脚本添加到主题文件中，如下所示：

$( "img.pro" ).parent().css( "border", "5px solid red" );

Answer 2

对于不包含文字的元素，似乎有:before和:after的讨论。

然而，有一种纯粹的CSS方式。在这里讨论

Does :before not work on img elements?

TimPietrusky演示了它（向下滚动）。解决方案在CodePen：

http://codepen.io/TimPietrusky/pen/xpesA

聪明的人使用content属性设置文字，一旦有文字，:after和:before将/应该/可以适用。然后他设计:before和:after以符合他的期望。我喜欢它，但这是一个经典的＆＃34;误用＆＃34;必须在许多浏览器上管理的副作用。

Answer 3

我的第一步是设置<a class='something'>而不是img。