当我们的元素有<a> Tag</a>时更改兄弟的CSS

Question

我购买了DotNetNuke登录模块并想要更改此模块的外观。 当用户在我的网站中登录时，将生成如下的html：

<div id="Login">
<div id="HelloLogin">Hello</div>
<a href="http://localhost:6111/en-us/userprofile.aspx">mosijava</a>
</div>

但是当他退出时，html就像下面一样，<a>标签不会生成：

<div id="Login">
<div id="HelloLogin">Hello</div>
guest
</div>

我想将ID分配给ID =“HelloLogin”的div，仅在用户登录时。这意味着我的html中有<a>标记。

有没有纯粹的CSS方法呢？

我尝试过这个选择器，但它不起作用

#login a:before{
color:red;
}

Answer 1

CSS中没有先前的兄弟选择器，因此您将无法编写类似于您尝试过的内容。 :before伪元素的工作方式与您预期的不同。

但是，在这种特殊情况下，您可以将CSS3的:not()和:only-child伪类与ID一起使用，因此仅当#HelloLogin 不<时才会匹配/ em> #Login中唯一的子元素（内联文本，如示例中的“guest”一词，不算作CSS中的子/兄弟）：

#Login #HelloLogin:not(:only-child) {
    color: red;
}

问题在于IE＆lt; 9不支持:not()或:only-child，但在纯CSS中没有其他方法可以做到。