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结构选择器：第一个孩子

回答

相关问题