CSS-常见的伪类选择器的用法详解

喜欢ヅ旅行 2023-08-17 17:34 125阅读 0赞

#### :first-child ####

`:first-child` 相对于父级元素做参考，选择所有子元素中的第一个子元素，第一个子元素必须是规定的元素类型，如果不是则不会被选择

示例：

<dl>
    	<dt>我的颜色</dt>
    	<dd>颜色</dd>
    	<dd>颜色</dd>
    	<dt>我的颜色</dt>
    	<dd>颜色</dd>
    </dl>
    <dl>
    	<dt>我的颜色</dt>
    	<dd>颜色</dd>
    	<dd>颜色</dd>
    	<dt>我的颜色</dt>
    	<dd>颜色</dd>
    </dl>

dt:first-child{ 
    	color: red;
    }

![在这里插入图片描述][20191001201451507.png]  
如下方法就无法选中第一个子元素

dd:first-child{ 
    	color: yellow;
    }

#### :last-child ####

`:last-child` 相对于父级元素做参考，选择所有子元素中的最后子元素，最后一个子元素的元素类型与选择器规定的类型一致才会被选择

dd:last-child{ 
    	color: green;
    }

![在这里插入图片描述][20191001202029574.png]  
如下方法就无法选中最后一个子元素

dt:last-child{ 
    	color: green;
    }

#### :first-of-type ####

`:first-of-type` 相对于父级做参考，选择所有子元素中的特定类型的第一个子元素；选择的是特定类型元素中的第一个，并不是选择：规定的元素类型并且是第一个子元素

dd:first-of-type{ 
    	color: yellow;
    }

![在这里插入图片描述][20191001202509147.png]

#### :last-of-type ####

`:last-of-type` 相对于父级做参考，选择所有子元素中的特定类型的最后一个子元素

dd:last-of-type{ 
    	color: pink;
    }

![在这里插入图片描述][20191001203115151.png]

[20191001201451507.png]: /images/20230808/e6cb6a7751ae4cd981a169b58456e15c.png
[20191001202029574.png]: /images/20230808/15add6ef4b1e4c5486efa4ae07dcad63.png
[20191001202509147.png]: /images/20230808/87089c5c2ecd4fffb9c36b43c3eb57ce.png
[20191001203115151.png]: /images/20230808/eda37e6e98134ebd8c0b131df353842c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 css伪类选择器(css伪元素选择器)

css选择器的使用怎么样算是规范呢？感觉公说公有理婆说婆有理? 这个主要是自己用着顺手，一般用id定义外围大框架，因为id优先级最高这样做不会出现框架问题，只要在调整框架

素颜马尾好姑娘i/ 2023年09月26日 13:10/ 0 赞/ 29 阅读

相关 CSS-常见的伪类选择器的用法详解

:first-child `:first-child` 相对于父级元素做参考，选择所有子元素中的第一个子元素，第一个子元素必须是规定的元素类型，如果不是则不会被选择示

喜欢ヅ旅行/ 2023年08月17日 17:34/ 0 赞/ 126 阅读

相关 CSS-常见的伪元素选择器的用法详解

`:before` 与 `:after` 分别在被选择元素的内容之前和内容之后插入元素，所以必须在双标签中使用伪元素选择器，在单标签中无效；使用伪元素选择器时必须要设置 con

本是古典何须时尚/ 2023年08月17日 17:03/ 0 赞/ 147 阅读

相关 CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解

常见的高级选择器有后代选择器、交集选择器、并集选择器后代选择器选择器之间用空格隔开就是后代选择器选择的是后代元素，不一定是儿子元素，后代选择器描述的是

妖狐艹你老母/ 2023年08月17日 16:30/ 0 赞/ 152 阅读

相关详解CSS3中的选择器（三）伪类选择器

今天我为大家讲解下伪类选择器，这种选择器也是比较难以掌握的一种选择器。什么是伪类选择器呢做过Web网页开发的童鞋都经常看到css样式中有这么一种类型`p:first

阳光穿透心脏的1/2处/ 2023年02月14日 15:56/ 0 赞/ 28 阅读

相关 CSS3 选择器——伪类选择器

前面花了两节内容分别在《[CSS3选择器——基本选择器][CSS3]》和《[CSS3选择器——属性选择器][CSS3 1]》介绍了[CSS3选择器][CSS3 2]中的基本选择

た入场券/ 2022年06月10日 05:24/ 0 赞/ 386 阅读

相关 css伪类选择器

[查看demo][demo] <style> p:last-child{ background-color: ccc; } div>:not(p){ color: b

你的名字/ 2021年12月09日 03:33/ 0 赞/ 398 阅读

相关 CSS 伪类选择器

对css的伪类选择器真的是又爱又恨，每次都很完美的被搞混了，还是得做一下总结。 1. :nth-of-type(n) 选择第n个元素 1 <div

小灰灰/ 2021年10月19日 04:46/ 0 赞/ 497 阅读

相关 css伪类、伪元素选择器

`1.伪类选择器` 条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。 A.伪类的语法：（

忘是亡心i/ 2021年09月14日 00:14/ 0 赞/ 593 阅读

相关 css 伪类选择器

链接伪类选择器改变子元素样式，子元素必须写在hover后，前面写父元素标签如body:hover div{} ; 改变body标签内的div样式

╰+哭是因爲堅強的太久メ/ 2021年07月24日 20:54/ 0 赞/ 552 阅读