gpt4 book ai didi

css 结构选择器 :first-child

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:26 24 4
gpt4 key购买 nike

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

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

最佳答案

主要是因为 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 - 如果父元素上有边框,则子元素将不会继承 border 属性。 https://codepen.io/mcoker/pen/OgPPNK

关于css 结构选择器 :first-child,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44359441/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com