Table of Contents
HTML代码
第2个元素
CSS选择器
总结
Home Web Front-end HTML Tutorial CSS3中:first-child和:first-of-child的区别_html/css_WEB-ITnose

CSS3中:first-child和:first-of-child的区别_html/css_WEB-ITnose

Jun 24, 2016 am 11:36 AM

CSS中加入了很多高级的选择器,能让我们方便的查找到元素,然后给查找到的元素设置样式,其中:first-child和:first-of-child看似只相差一个单词,但是却有不同的用法和意义,今天的这篇文章就给大家来说说:first-child和:first-of-child两个选择器的区别。

HTML代码

加入我们有这样的一段HTML代码:

<div>    <p>第1个元素</p>    <h1 id="第-个元素">第2个元素</h1>    <span>第3个元素</span>    <span>第4个元素</span></div>
Copy after login

CSS选择器

我们要查找其中的元素,如果使用下面的定义方法

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素; h1:first-child  匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个; span:first-child  匹配不到任何元素,因为在这里两个span元素都不是div的第一个子元素; :first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。

上面应用的样式,有两个是匹配不到的,但是别慌张,CSS中还定义了:first-of-child伪类,请看他的用法和讲解:

p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素; h1:first-of-type  匹配到的是h1元素,因为h1是div的所有为h1的子元素中的第一个,事实上这里也只有一个为h1的子元素; span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素,匹配到的是第一个。 :first-of-type  匹配到的是p元素

总结

:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是 属于同一级的,也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

本文系作者  问说网 授权问说网发表,并经问说网编辑,转载请注明出处和  本文链接。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update? Mar 04, 2025 pm 12:32 PM

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

How do I use HTML5 form validation attributes to validate user input? How do I use HTML5 form validation attributes to validate user input? Mar 17, 2025 pm 12:27 PM

How do I use HTML5 form validation attributes to validate user input?

What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

What is the purpose of the <iframe> tag? What are the security considerations when using it?

How to efficiently add stroke effects to PNG images on web pages? How to efficiently add stroke effects to PNG images on web pages? Mar 04, 2025 pm 02:39 PM

How to efficiently add stroke effects to PNG images on web pages?

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

What is the purpose of the <meter> element?

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

What is the purpose of the <datalist> element?

What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

What is the viewport meta tag? Why is it important for responsive design?

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

What is the purpose of the <progress> element?

See all articles