一般兄弟選擇器用於樣式目標：僞類

好的我已經花了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文檔的底部，那麼導航部分任何內容部分是在它下面不會得到適用於它的造型。

請幫助困惑的新手！

來源

2013-08-26 Daryl

他們說什麼。我不認爲這是個好主意。標記定義了文檔的結構，並且是其中最重要的部分（除了課程的內容）。 CSS應該服從於此;你不應該讓你的標記由你的CSS來裁定。 –

非常同意 – MarsOne

From the Mozilla Developer Network：

的~組合子分隔兩個選擇器和所述第二元件僅當它被第一之前相匹配，並且兩個共享共同的母體。

所以在下面的選擇：

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

如果#header是在由#home:target涉及的內容標記成功，它不會匹配。

來源

2013-08-26 09:05:03

非常感謝，我現在終於明白了。這讓我安靜地生氣了！ – Daryl

當然，沒有汗水。 –

CSS3中提供了一般兄弟選擇器，並且此選擇器中使用的組合符是波形符（~）。

選擇器匹配給定元素的兄弟元素。

在這種特殊情況下，作者希望頭部是另一個類的後續兄弟，以便他可以定位相應的鏈接。如果在HTML的開始部分定義了頭部，則這是不可能的。技術上，如果在文件開頭處有頭部，它仍然是其他div的兄弟，因爲它們都是相同的HTML元素（<div>）。但是在這種情況下，要使~工作，頭元素必須在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

這也可以所有目標一起喜歡如下

#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-26 09:05:16 MarsOne

*「，因爲他已經在HTML末尾定義了標題，它最終成爲了所有以前元素的子元素」* - 這怎麼回事？我們不能影響樣式表中的標記層次結構。 –

對不起。我的錯。它相當於兄弟 – MarsOne

謝謝你的幫助，給出的2個答案最終幫助我理解了它！ – Daryl

一般兄弟選擇器用於樣式目標：僞類

回答

相關問題