css結構選擇器：第一個孩子

如果我在下面給定的html上應用下面的樣式，爲什麼它在body元素中的所有內容上應用樣式。我假設身體不是HTML的第一個孩子，它不應該將這種風格應用到body元素內的任何東西上。css結構選擇器：第一個孩子

：第一胎{顏色：藍色;}

HTML

<html> 
    <head> 
     <title>Test Page</title> 
    </head> 
    <style> 
     :first-child { color: blue;} 
    </style> 
    <body> 
     <div> 
      <h1>This is a H6</h1> 
      <p>Carz wtf noice pour uh saiz hoi.</p> 
      <p>Oh winz lol wuv donutz yu. Herrow not wut carz pwety oh hornz. </p> 
      <p>Bere noze dum cheezeburger oh. Notise hai mikrosoft foots. Dum oh iz nuthing gravy haz nozbody finking. Funnae hai nom winz noze r. </p> 
     </div> 
     <div> 
     <h1>This is an H1</h1> 
     <p>Sheeze dum can compewters flowerz. Loike choosday noice nom samez do hornz mac n. Funnae pour hoi dided gravy samez ghoast I.</p> 
     <p> U pwety oh haz cat ghoast hai. Taytoes hornz hunnae hai meeeow ghoast. 
     </p> 

     <h2>This is an h2</h2> 
     <p>Sheeze meeeow dum uh dided cat nom hornz wuv. </p> 
     <p>Donutz scratchin mac n dum rong ded gravy.</p> 
     <p>Thx chz can hoi wtf. Evrybody yu u ded choosday evrybody hai neether. Iz hai dided sheeze bukket noice nozzing chz watzzup?. </p> 
     <h2>this is another h2</h2> 
     <p>Graet samez iz iz nozbody saiz sheeze oh carz. Jest kitteh not scratchin herrow. Nom scratchin rong saiz ya kitteh haz chz nom. </p> 
     <p>Graet gravy gravy mikrosoft. Dided winz cheezeburger finking samez wtf foots. Gravy wut mac n partay noice noze foots. </p> 
     <p>Can sink nom compewter ur ded how herrow cat. </p> 
     </div> 
    </body> 
    </html>

來源

2017-06-04 ATHER

主要是因爲html是:first-child，所以它本質上是相同的話說html { color: blue; }，因爲CSS 級聯，其他元素也繼承它。因此，它基本上將其應用於頁面上沒有指定其他顏色的所有元素，因爲顏色首先設置爲html。例如，如果您添加了a標記，不是父母的第一個孩子，它不會繼承此顏色，因爲鏈接具有自己的顏色，並且會覆蓋html上的顏色。這裏的https://codepen.io/mcoker/pen/WObbbb

但除了上html的風格，你的文檔中的任何父元素的每一個「第一個孩子」會有針對性只是用:first-child一個例子，所以你的很多元素越來越color: blue直接應用以及間接從繼承第一個孩子的父元素的顏色。

這也是值得注意的，這是基於這樣的事實，color是在CSS可繼承的財產，這意味着如果設置了父元素color，顏色會被繼承到沒有一個明確的顏色設置子元素CSS或通過代理/瀏覽器樣式表應用的。非可繼承屬性的示例是border - 如果父元素上有邊框，則子元素將不會繼承邊界屬性。 https://codepen.io/mcoker/pen/OgPPNK

來源

2017-06-04 22:49:40

好的答案，但我會使用非繼承屬性'border'等作爲示例，因爲''標籤在html中非常特殊，就像爲什麼顏色是藍色的，並且它不會繼承顏色在默認情況下，它提出了另一個問題。 – Stickers

奇怪的是，CSS 2.x和Selectors level 3將'：first-child'定義爲「：first-child僞類表示一個元素，它是*其他元素*的第一個子元素。這將排除'html'元素，因爲它不是任何其他元素的子元素。只有選擇器級別4的定義會包含'html'元素。 – Alohci

@Pangloss感謝您的反饋。我用'a'指出的只是爲了說明繼承 - 以及如果另一個元素具有顯式設置的顏色或由瀏覽器設置（如果是'a'），它將不會繼承，除非該元素也是一個「第一個孩子。」這不是關於可繼承/不可繼承的CSS屬性，比如顏色與'border'或'background'什麼的，但這也是一個很好的例子。我會補充一點。你是什麼意思呢提出另一個問題？ –

既然你不是你的僞類:first-child之前提供一個元素，ID或類名稱，應用程序是全球。每個第一個孩子。所以，一切。

你真的可以看到這是如何工作通過使用:nth-child()選擇：

:nth-child(4) { 
 
    color: blue; 
 
}

<html> 
 

 
<head> 
 
    <title>Test Page</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <h1>This is a H6</h1> 
 
    <p>Carz wtf noice pour uh saiz hoi.</p> 
 
    <p>Oh winz lol wuv donutz yu. Herrow not wut carz pwety oh hornz. </p> 
 
    <p>Bere noze dum cheezeburger oh. Notise hai mikrosoft foots. Dum oh iz nuthing gravy haz nozbody finking. Funnae hai nom winz noze r. </p> 
 
    </div> 
 
    <div> 
 
    <h1>This is an H1</h1> 
 
    <p>Sheeze dum can compewters flowerz. Loike choosday noice nom samez do hornz mac n. Funnae pour hoi dided gravy samez ghoast I.</p> 
 
    <p> U pwety oh haz cat ghoast hai. Taytoes hornz hunnae hai meeeow ghoast. 
 
    </p> 
 

 
    <h2>This is an h2</h2> 
 
    <p>Sheeze meeeow dum uh dided cat nom hornz wuv. </p> 
 
    <p>Donutz scratchin mac n dum rong ded gravy.</p> 
 
    <p>Thx chz can hoi wtf. Evrybody yu u ded choosday evrybody hai neether. Iz hai dided sheeze bukket noice nozzing chz watzzup?. </p> 
 
    <h2>this is another h2</h2> 
 
    <p>Graet samez iz iz nozbody saiz sheeze oh carz. Jest kitteh not scratchin herrow. Nom scratchin rong saiz ya kitteh haz chz nom. </p> 
 
    <p>Graet gravy gravy mikrosoft. Dided winz cheezeburger finking samez wtf foots. Gravy wut mac n partay noice noze foots. </p> 
 
    <p>Can sink nom compewter ur ded how herrow cat. </p> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-06-04 22:40:02

css結構選擇器：第一個孩子

回答

相關問題