css选定㊑父原素下的第一身高原素(:first

2021-03-24 01:12 jianzhan

序言

近期在新项目选用到 :first-child 非常容易的就想起了,嗯嗯。我觉得便是挑选第一个原素吗?

仿佛非常好用,平常应用中都没有碰到甚么难题,理所应当的就认为它总是选定父原素下的第一个原素,对孙原素和曾孙原素沒有危害。客观事实证实,我的理所应当是错的。

E:first-child的第一个错误观念(总是选定我要求的地区中的一个,不容易解析xml其下有是多少个孙或曾孙原素)

<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>这一文章段落是其父原素(body)的首例子原素。</p>

<h1>热烈欢迎浏览我的首页</h1>
<p>这一文章段落并不是其父原素的首例子原素。</p>

<div>
<p>这一文章段落是其父原素(div)的首例子原素。</p>
<p>这一文章段落并不是其父原素的首例子原素。</p>
</div>

<p><b>注解:</b>针对 IE8 及更早版本号的访问器中的 :first-child,务必申明 <!DOCTYPE>。</p>

</body>
</html>

上边的编码确实是总是有一个p标识起效吗?

它是后就早已犯了大家普遍的第一个错误观念,觉得body p:first-child选定的便是第一个原素。

实际上,要是在大家选定的body这一块中,假如这一p在其父原素中归属于第一个,那它就被选定。

E:first-child的第二个错误观念(无论这一E原素前边几个弟兄,要是我是第一个E原素,那么我便会起效)

還是上边的编码,可是大家在body中的p标识前面了一个font标识,发觉p早已无效了。
上边的2个事例早已很清晰的告知大家了这一挑选器究竟应当如何用

:first-child 用以选择归属于其父原素的首例子原素的特定挑选器

怎样只挑选特定原素中子原素呢?不考虑到膝下有是多少个小孙子和曾孙呢。

子挑选器(>) :只有挑选做为某原素孩子原素的原素(立即子原素),不包含孙原素、曾孙原素这些等
还拿上边的编码举例说明,将>添上试一下实际效果

有时候候应用不正确的挑选器,却沒有出错。但不对便是不对。总会有被发觉的情况下。
很幸运此次的不正确要我学得了专业知识。

到此这篇有关css选定父原素下的第一身高原素(:first-child)的文章内容就详细介绍到这了,大量有关css父原素下的第一身高原素內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!