Css选择取决于不同的选择器条件

Question

是否可以定义css类的行为依赖于其他css类？

例如;当

a:hover 

然后我想设置

p {background:#fff;}

纯css有可能吗？

编辑：假设不存在嵌套关系。

Answer 1

如果你有这样的结构：

<a><p>...</p></a>

然后这个：

a:hover p {background: #fff;}

会奏效。但是，块元素不应放在内联元素内（在这种情况下，<p>内没有<a>

如果你的标记有效，看起来像这样：

<p><a>...</a></p>

然后你可以

p:hover {background: #fff;}

但是后代不能影响父css（除非你使用javascript），而相反的情况是真的（父css影响后代）

Answer 2

如果您的意思是希望所有p在a:hover时拥有该样式而不管它们在DOM中的位置，那么不，您不能这样做。当p收到悬停时，您需要使用脚本将样式（或包含该样式的某些类）应用于a元素。

Answer 3

我不明白为什么你会被这些限制所限制，只有极少的创造力。如果使用固定定位，后代可以与其父级重叠。并且仍然像后代一样回应。

Answer 4

如果<p>标记紧跟<a>标记，那么您可以使用相邻的兄弟选择器，例如。

a:hover+p{
    background:#fff;
}

IE8 +

支持此功能