伪类 first-child、last-child 、last-of-type、first-of-type 、nth-child()

最新推荐文章于 2024-01-04 14:08:39 发布

du_独孤九剑

最新推荐文章于 2024-01-04 14:08:39 发布

阅读量169

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_38686150/article/details/115728141

版权

本文介绍了CSS中的结构伪类选择器`last-of-type`和`first-child`的工作原理和常见应用场景。`last-of-type`只选取同类型元素中的最后一个，而`first-child`则会选择父元素下相同类型的第一个子元素。示例代码展示了这两个选择器在实际布局中的用法，强调了它们的限制条件。理解这些选择器对于优化CSS选择器性能和提高页面样式控制能力至关重要。

摘要由CSDN通过智能技术生成

last-of-type

写CSS，发现有时用结构伪类first-child、last-child会失效。

div p:last-of-type，只会从p元素中找，会忽略其他类型元素

<p>第一段</p>
<p>第二段</p>
<div class="firstbox">
	<p>第一段</p>
	<p>第二段</p>
</div>
<div class="thirdbox">
	<p>第一段</p>
	<p>第二段</p>
	<h1>插入一个标题</h1>
</div>
//..................... css
  p:last-of-type {background-color: aqua;}

在这里插入图片描述

first-of-type

first-of-type：指的是父元素下，相同类型子元素中的第一个
原因同 last-of-type

last-child

在这里插入图片描述

<div class="one">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
     <div>7</div>
     <div>8</div>
     <div>9</div>
     <p>哈哈哈哈哈哈哈 你选错了</p>
</div>

// .............. css
.one >div {
   width: 100%;
   height: 50px;

}

.one >div:last-child {
 color: red;
}