两个条件合二为一，css可能吗？答案

【问题标题】：two conditions in one with css possible?两个条件合二为一，css可能吗？
【发布时间】：2012-07-10 20:53:21
【问题描述】：

你好，我有一个关于 css 的问题。

在我的导航栏中，我有 3 个链接。我用：

    #p1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #999999;
    text-decoration: none;
}

对于显示用户所在站点的状态。

如果用户滚动其他两个链接，我有这些：

    #p2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 45px;
    font-weight: bolder;
    color: #ECECEC;
    text-decoration: none;
}
#p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
}
#p2:active {
    font-weight: lighter;
    color: #999999;
}

好的，问题是我想在用户悬停 p2 时从 p1 更改颜色。意思是：

 #p2:hover {
    font-weight: bolder;
    color: #999999;
    cursor:default;
        #p1 {
        color: #f23;
        }
 }

这可能吗？

非常感谢。

html:

 <div id="nav">
      <div id="link"><p1>link1</p1></div>
      <div id="link"><p2>link2</p2></div>
      <div id="link"><p2>link3</p2></div>
      <div id="link"><div id="login"></div></div>
    </div>

【问题讨论】：

CSS 并不是很好地让一个元素上的动作影响兄弟姐妹或父母，它非常以孩子为中心。所以除非你可以嵌套它......祝你好运。特别是如果您使用的是 CSS2 及更低版本。
你的意思是没有办法实现？
我用 html 更新了问题。
@TheZ：CSS 提供下一个兄弟选择器，但不提供前一个兄弟，因此您可以在一定程度上影响兄弟姐妹。最以孩子为中心的版本可能是 CSS1，它只有一个后代选择器。

标签： html css css-selectors

【解决方案1】：

纯 CSS 无法做到这一点。

你可以做的是使用javascript并在#p2的悬停事件上更改#p1的颜色。

或者您可以使用less css 将#p1 的颜色设置为变量并在#p2:hover 中更改该变量的值，尽管我没有尝试过这种方法。 但同样，less css 不是纯 css，它也使用 javascript。

使用 javascript（使用 jquery 库），您的代码将是：

$("#p2").hover(function() {
  $("#p1").css('color', '#f23');
});

【讨论】：