Question

如果我在下面的给定html上应用以下样式，为什么它将样式应用于body元素内的所有内容。我假设因为身体不是html的第一个孩子，所以不应该将这种风格应用到身体元素内的任何东西上。

：first-child {color：blue;}

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>

Answer 1

主要是因为html是:first-child，所以它与说html { color: blue; }基本相同，而且因为CSS 级联，其他元素也会继承它。所以它基本上将它应用于页面上没有指定其他颜色的所有元素，因为颜色首先在html上设置。例如，如果您添加了a标记不是父项的第一个子项，则不会继承此颜色，因为链接具有自己的颜色并会覆盖颜色html。这是一个例子https://codepen.io/mcoker/pen/WObbbb

但是除html上的样式外，文档中任何父元素的每个“第一个子”都将仅使用:first-child作为目标，因此很多元素都会被{{1}直接应用以及间接应用于从第一个子元素的父元素继承颜色。

值得注意的是，这是基于color: blue是CSS中的可继承属性的事实，这意味着如果在父元素上设置color，颜色将继承到子元素没有CSS中的显式颜色集或通过代理/浏览器样式表应用的颜色集。不可继承属性的示例是color - 如果父元素上有边框，则子节点不会继承border属性。 https://codepen.io/mcoker/pen/OgPPNK

Answer 2

由于您未在伪类:first-child之前提供元素，id或类名，因此应用程序是全局的。每个第一个孩子。因此，一切。

您可以使用:nth-child()选择器真正注意到这是如何工作的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

css结构选择器：first-child

2 个答案: