Hello 大家好,我是一碗周,不是你想的那个“一碗粥”,是一个不想被喝掉的前端,如果我写的文章有幸可以得到你的青睐,万分有幸~
这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》
编写不易转载请获得允许
本篇文章我们将来学习CSS中的结构伪类选择器,该类选择器包含的内容如下表所示:
伪类选择器 | 作用 |
---|---|
selector:first-child |
用来定位一组兄弟元素中的第一个元素 |
selector:last-child |
用来定位一组兄弟元素中的最后一个元素 |
selector:nth-child(n) |
用来定位一组兄弟元素中的第n个元素 |
selector:nth-last-child(n) |
用来定位一组兄弟元素中倒序方式的第n个元素 |
selector:first-of-type |
用来定位一组同类型的兄弟元素中的第一个元素 |
selector:last-of-type |
用来定位一组同类型的兄弟元素中的最后一个元素 |
selector:nth-of-type(n) |
用来定位一组同类型的兄弟元素中的第n个元素 |
selector:nth-last-of-type(n) |
用来定位一组同类型的兄弟元素中倒序方式的第n个元素 |
selector:only-child |
用来定位一个没有任何兄弟元素的元素 |
selector:only-of-type |
用来定位一个没有任何同类型兄弟元素的元素 |
selector:empty |
用来定位一个没有子级元素的元素,并且该元素也没有任何文本内容 |
selector:root |
用来定位 HTML 页面中的根元素( ) |
CSS中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素,从而减少对HTML元素的id
属性和class
属性的依赖。
:first-child
伪类用来定义一组兄弟元素的第一个元素而:last-child
伪类则是定位一组兄弟元素的最后一个元素。
如下示例代码展示了:first-child
伪类和:last-child
伪类的用法:
HTML结构如下:
<ul>
<li>涂山红红li>
<li>涂山苏苏li>
<li>涂山蓉蓉li>
<li>涂山雅雅li>
ul>
CSS代码如下:
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
代码运行结果如下图所示:
:first-child
伪类可以使用:nth-child(n)
伪类改写为:nth-child(1)
,而:last-child
伪类可以使用:nth-last-child(n)
伪类改写为:nth-last-child(1)
。
:first-child
伪类和:last-child
伪类经常会引起误解。例如 li:first-child
是用来定位所有元素中第一个作为子级元素的,而不是定位
元素的第一个子级元素。
:first-of-type
伪类和:last-of-type
伪类一个用于定位一组元素中的第一个兄弟元素,一个用来定位最后一个。
如下示例代码展示了:first-of-type
伪类和:last-of-type
伪类的用法:
HTML结构如下:
<h3>狐妖小红娘h3>
<p>涂山红红p>
<p>涂山苏苏li>
CSS代码如下:
p:first-of-type {
color: red;
}
p:last-of-type {
color: blue;
}
代码运行结果如下图所示:
:first-of-type
伪类与:last-of-type
伪类的用法一定要和:first-child
伪类与:last-child
伪类的用法区分开。以:first-of-type
伪类和:first-child
伪类为例来说明:
:first-of-type
伪类是定位一组同类型的兄弟元素中的第一个元素,不管这个元素在兄弟元素中的位置如何。
:first-child
伪类是定位一组兄弟元素中的第一个元素,这些兄弟元素不一定是同类型的。
如果将上述示例代码中的:first-of-type
伪类改写为:first-child
伪类的话,将不会生效。
:nth-child(n)
伪类和:nth-last-child(n)
伪类都是CSS3中新增的选择器,这两个选择器的用法基本上是一致的。区别在于:nth-last-child(n)
伪类是倒序方式定位元素,也就是说,:nth-last-child(n)
伪类是从一组元素的结尾开始的。
接下来,主要以:nth-child(n)
伪类为例进行讲解。:nth-child(n)
伪类中的n
参数的含义具有3种情况:
数字值:任意一个大于 0 的正整数。例如 关键字: 格式为 如下示例代码展示了 代码运行结果如下图所示: 如下示例代码展示了 代码运行结果如下图所示: CSS中的 如下代码展示的 代码运行结果如下图所示: 本篇文章学习了CSS中的结构伪类选择器,需要注意的就是相似结构伪类选择器之间的区别,具体可以参照文章一开始的那个表格。#example td:nth-child(1)
表示定位ID为example
的父元素下所有元素中的第一个元素。
odd
表示奇数,等同于:nth-child(2n)
;even
表示偶数,等同于:nth-child(2n+1)
。(an+b)
公式:a
表示周期的长度(步长 ),n
表示计数器(从 0 开始 ),而b
则表示偏移值。:nth-child(n)
伪类(实现表格隔行换色效果)的用法:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nth-child伪类title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
th,
td {
border-top: 1px solid lightcoral;
text-align: center;
}
/* 最后一行单元格在底部增加一个边框效果 */
tr:last-child td {
border-bottom: 1px solid lightcoral;
}
/* 实现隔行换色 */
tr:nth-child(even) {
background-color: aquamarine;
}
style>
head>
<body>
<table>
<tr>
<th>姓名th>
<th>区域th>
tr>
<tr>
<td>梵云飞td>
<td>西西域td>
tr>
<tr>
<td>欢都落兰td>
<td>南国td>
tr>
<tr>
<td>石宽td>
<td>北山td>
tr>
<tr>
<td>涂山红红td>
<td>涂山td>
tr>
table>
body>
html>
:nth-child(n)
伪类的n
参数用法中比较复杂的是使用(an+b)
公式用法,如下示例列举了一些公式用法:
:nth-child(5n)
:定位元素的序号是5 [=5×1]、10 [=5×2]、15 [=5×3]等。:nth-child(3n+4)
:定位元素的序号是4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。:nth-child(-n+3)
:定位元素的序号是3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。:nth-child(n)
伪类与:nth-last-child(n)
伪类和:nth-of-type(n)
伪类与:nth-last-of-type(n)
伪类的区别,类似于:first-of-type
伪类与:last-of-type
伪类和:first-child
伪类与:last-child
伪类的区别。:empty
:empty
伪类是用来定位没有任何子级元素或文本内容的元素,其中文本内容包含了空白。但是HTML的注释是不影响:empty
伪类定位元素的。:empty
伪类的用法:DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>empty伪类title>
<style>
body {
/* 开启flex布局 */
display: flex;
}
.box {
background: pink;
height: 80px;
width: 80px;
margin: 0 20px;
}
.box:empty {
background: lime;
}
style>
head>
<body>
<div class="box">div>
<div class="box">这个元素的背景是粉色的div>
<div class="box">
div>
body>
html>
:root
:root
伪类选择器比较简单,它代表的就是元素。
:root
伪类的用法::root {
height: 100vh;
width: 100vw;
background-color: dodgerblue;
}
总结