1

好的，我已经花了 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."我会很高兴的！

有问题的教程

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

请帮助一个困惑的菜鸟！

4

2 回答 2

1

通用同级选择器在 CSS3 中可用，此选择器中使用的组合符是波浪号 ( ~)。

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

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

查看此页面以获取有关其工作原理的详细说明，并查看官方文档。

#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

这也可以像下面这样一起定位

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
    background: #000;
    color: #fff;
}
于 2013-08-26T09:05:16.867 回答
0

来自 Mozilla 开发者网络：

组合器~分隔两个选择器并匹配第二个元素，前提是它位于第一个元素之前，并且两者共享一个共同的父元素。

所以在以下选择器中：

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

如果#header被寻址的内容在标记中成功#home:target，则不会匹配。

于 2013-08-26T09:05:03.553 回答