CSS :target 伪类和兄弟问题答案

【问题标题】：CSS :target pseudo class and sibling issueCSS :target 伪类和兄弟问题
【发布时间】：2012-05-18 19:07:42
【问题描述】：

当一个不同的 div 是 :target(ed) 时，我试图更改一个 div 的属性。 JSFiddle 在这里：http://jsfiddle.net/FC5sQ/。（我相信）问题的根源是

#tevents:target ~ .titlewrap {top:0;}

CSS 中的行。基本上，一旦 #tevents id 成为目标，我希望 titlewrap 类的最高值为 0。

【问题讨论】：

【解决方案1】：

通用兄弟组合~ 不能向后工作。因此，由于您的 .titlewrap 在 HTML 中位于 #tevents 之前，因此您的选择器将不起作用。

不幸的是there's no previous sibling combinator，因此如果您无法更改标记并相应地设置更改样式，那么您无法使用:target 和同级组合器来执行此操作。

顺便说一句，您的top: 30% 样式也没有生效，那是因为您没有为您的.titlewrap 设置明确的height。

【讨论】：

如果是这种情况，在 .titlewrap div 之前定义的带有 #tevents div 的修改后的 HTML 结构会起作用吗？我在JSFiddle中试了一下，结果和之前一样。
@natosennimi：它会起作用，我在最后一段解释了为什么你的结果是一样的。您需要为.titlewrap 定义一个高度。
谢谢，想通了。顺便说一句，.titlewrap 上的 top:30%; 在我的浏览器上可以正常工作/显示。可能是 x 浏览器兼容性问题。