Question

好的我花了3天的时间寻找答案，但仍然无法理解答案，所以请有人看看本教程并向我解释他为什么这么说 -

"The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently."我会很开心！

tutorial in question

如果我从html文档的底部移动带有导航部分的Header，那么它下面的任何内容部分都不会将样式应用于它。

请帮助一个混乱的菜鸟！

Answer 1

通用同级选择器在CSS3中可用，此选择器中使用的组合子是波形符（~）。

选择器匹配给定元素的兄弟元素。

在这个特定场景中，作者希望标题是另一个类的后续兄弟，以便他可以定位相应的链接。如果标头是在HTML的开头定义的，这是不可能的。技术上如果你在文件的开头有标题它仍然是其他div的兄弟，因为它们都是相同的HTML元素（{{1 }}）。但是在这种情况下，<div>工作时，header元素必须出现在HTML标记中的另一个元素之后。

检查this page以获取有关其工作原理的详细说明，并检查official documentation。

这也可以像以下一样全部定位

#home:target ~ #header #navigation #link-home
                     OR
#portfolio:target ~ #header #navigation #link-portfolio
                     OR
#about:target ~ #header #navigation #link-about
                     OR
#contact:target ~ #header #navigation #link-contact

Answer 2

From the Mozilla Developer Network：

~组合子分隔两个选择器并匹配第二个选择器元素仅当它在第一个之前，并且两者共享一个公共元素父节点。

所以在以下选择器中：

#home:target ~ #header #navigation #link-home

如果标记中的#header 成功由#home:target解决的内容，则不会匹配。

用于样式target的一般兄弟选择器：伪类

2 个答案: