【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

这篇具有很好参考价值的文章主要介绍了【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。





一、CSS3 结构伪类选择器



常见的 结构伪类选择器 :

  • E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ;
        ul li:first-child {
            /* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素 */
            background-color: aqua;
        }
  • E:last-child 选择器 : 该选择器 选择 匹配的父容器 中的 最后一个 E 类型标签 子元素 ;
        ul li:last-child {
            /* 结构伪类选择器 选择 ul 父容器下的 最后一个 li 子元素 */
            background-color: pink;
        }
  • E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ;
    • E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E:nth-child(n) 选择器 选择标签 , 必须精准的指出要选择的子元素的索引和类型 , 设置错误 , 则无法选择出想要的标签 ;
        ul li:nth-child(2) {
            /* 结构伪类选择器 选择 ul 父容器下的 第二个 li 子元素 */
            background-color: green;
        }
  • E:first-of-type 选择器 : 该选择器 指定 父容器中第一个 E 类型标签 ;
  • E:last-of-type 选择器 : 该选择器 指定 父容器中最后一个 E 类型标签 ;
  • E:nth-of-type 选择器 : 该选择器 指定 父容器中第 n 个 E 类型标签 ;




二、E:first-child / E:last-child 选择器




1、E:first-child 选择器


E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ;

下面的示例中有 5 个 <li> 标签 , <ul> 标签是父容器 , ul li:first-child 就是将 <ul> 父容器中的第一个 li 子元素选择出来 ;

代码示例 :

<!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>CSS3 结构伪类选择器</title>
    <style>
        ul li:first-child {
            /* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素 */
            background-color: aqua;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

展示效果 :
css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器


2、E:last-child 选择器


E:last-child 选择器 : 该选择器 选择 匹配的父容器 中的 最后一个 E 类型标签 子元素 ;

代码示例 :

<!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>CSS3 结构伪类选择器</title>
    <style>
        ul li:first-child {
            /* 结构伪类选择器 选择 ul 父容器下的 第一个 li 子元素 */
            background-color: aqua;
        }
        
        ul li:last-child {
            /* 结构伪类选择器 选择 ul 父容器下的 最后一个 li 子元素 */
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

显示效果 :

css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器





三、E:nth-child(n) 选择器




1、E:nth-child(n) 选择器语法说明


E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ;


E:nth-child(n) 选择器中的 n 可以有如下情况 :

  • 数字 : 数字代表 父容器中子元素的索引值 ; n 从 1 开始计数 ;
        ul li:nth-child(1) {
            /* 结构伪类选择器 选择 ul 父容器下的 第 1 个 li 子元素 */
            background-color: blue;
        }
  • 关键字 : 借助下面的 奇数 / 偶数 关键字 , 可以实现各行变色效果 ;
    • 偶数关键字 : even ;
    • 奇数关键字 : odd ;
        ul li:nth-child(even) {
            /* 结构伪类选择器 选择 ul 父容器下的 偶数索引的 li 子元素
               偶数索引也就是 第 2 个 / 第 4 个 li 子元素 */
            background-color: red;
        }
        
        ul li:nth-child(odd) {
            /* 结构伪类选择器 选择 ul 父容器下的 奇数索引的 li 子元素
               偶数索引也就是 第 1 个 / 第 3 个 / 第 5 个 li 子元素 */
            background-color: purple;
        }
  • 公式 : 公式中的 n 是从 0 开始计数的 , 数字中的 n 是从 1 开始计数的 ;
    • n : 表示所有的数值 , 取值范围 { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} , 非负整数 ;
    • 2n : 表示偶数 ;
    • 2n + 1 : 表示奇数 ;
    • 5n : 表示 第 5 / 10 / 15 / 20 / 25 等索引数字 ; { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} 代入即可 ;
    • -n + 5 : 表示前 5 个 , 1 / 2 / 3 / 4 / 5 索引的数字 ; { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} 代入即可 ;

如果 n 索引 是 第 0 个元素 , 或者 超出 了元素个数 , 该选择器会被忽略 ;



2、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>CSS3 结构伪类选择器</title>
    <style>
        ul li:nth-child(1) {
            /* 结构伪类选择器 选择 ul 父容器下的 第 1 个 li 子元素 */
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

显示效果 :
css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器


3、n 为关键字的情况


  • 关键字 : 借助下面的 奇数 / 偶数 关键字 , 可以实现各行变色效果 ;
    • 偶数关键字 : even ;
    • 奇数关键字 : odd ;

代码示例 :

<!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>CSS3 结构伪类选择器</title>
    <style>
        ul li:nth-child(even) {
            /* 结构伪类选择器 选择 ul 父容器下的 偶数索引的 li 子元素
               偶数索引也就是 第 2 个 / 第 4 个 li 子元素 */
            background-color: red;
        }
        
        ul li:nth-child(odd) {
            /* 结构伪类选择器 选择 ul 父容器下的 奇数索引的 li 子元素
               偶数索引也就是 第 1 个 / 第 3 个 / 第 5 个 li 子元素 */
            background-color: purple;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

显示效果 :

css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器


4、n 为公式的情况


  • 公式 : 公式中的 n 是从 0 开始计数的 , 数字中的 n 是从 1 开始计数的 ;
    • n : 表示所有的数值 , 取值范围 { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} , 非负整数 ;
    • 2n : 表示偶数 ;
    • 2n + 1 : 表示奇数 ;
    • 5n : 表示 第 5 / 10 / 15 / 20 / 25 等索引数字 ; { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} 代入即可 ;
    • -n + 5 : 表示前 5 个 , 1 / 2 / 3 / 4 / 5 索引的数字 ; { n = 0 , 1 , 2 , 3 , 4 ⋯   } \{ n = 0 , 1 , 2 , 3 , 4 \cdots \} {n=0,1,2,3,4} 代入即可 ;

如果 n 索引 是 第 0 个元素 , 或者 超出 了元素个数 , 该选择器会被忽略 ;


代码示例 :

<!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>CSS3 结构伪类选择器</title>
    <style>
        ul li:nth-child(n) {
            /* 结构伪类选择器 选择 ul 父容器下的 所有索引的 li 子元素*/
            background-color: blue;
        }
        
        ul li:nth-child(2n) {
            /* 结构伪类选择器 选择 ul 父容器下的 偶数索引的 li 子元素 */
            background-color: red;
        }
        
        ul li:nth-child(2n + 1) {
            /* 结构伪类选择器 选择 ul 父容器下的 奇数索引的 li 子元素 */
            background-color: purple;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

显示效果 :

css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器


5、子元素类型不同的情况


E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ;

E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E: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>CSS3 结构伪类选择器</title>
    <style>
        div span:nth-child(1) {
            /* 要选择第一个 span 元素 , 直接选择失败
               因为 第一个元素是 p 标签 */
            background-color: aqua;
        }
        
        div span:nth-child(2) {
            /* 要选择第一个 span 元素 , 
               只能使用正确的元素索引 2 ,
               正确的元素类型 span 才能准确的选择出来 */
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>p 标签 (第 1 个元素)</p>
        <span>span 标签 (第 2 个元素)</span>
        <span>span 标签 (第 3 个元素)</span>
        <span>span 标签 (第 4 个元素)</span>
    </div>
</body>

</html>

显示效果 :

css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器





四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器



E:xxx-of-type 选择器 :

  • E:first-of-type 选择器 : 该选择器 指定 父容器中第一个 E 类型标签 ;
        div span:first-of-type {
            /* 选择 div 父容器下的 第一个 span 标签 */
            background-color: aqua;
        }
  • E:last-of-type 选择器 : 该选择器 指定 父容器中最后一个 E 类型标签 ;
        div span:last-of-type {
            /* 选择 div 父容器下的 最后一个 span 标签 */
            background-color: pink;
        }
  • E:nth-of-type 选择器 : 该选择器 指定 父容器中第 n 个 E 类型标签 ;
        div span:nth-of-type(2) {
            /* 选择 div 父容器下的 第二个 span 标签 */
            background-color: red;
        }

代码示例 :

<!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>CSS3 结构伪类选择器</title>
    <style>
        div span:first-of-type {
            /* 选择 div 父容器下的 第一个 span 标签 */
            background-color: aqua;
        }
        
        div span:last-of-type {
            /* 选择 div 父容器下的 最后一个 span 标签 */
            background-color: pink;
        }
        
        div span:nth-of-type(2) {
            /* 选择 div 父容器下的 第二个 span 标签 */
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>p 标签 (第 1 个元素)</p>
        <span>span 标签 (第 2 个元素)</span>
        <span>span 标签 (第 3 个元素)</span>
        <span>span 标签 (第 4 个元素)</span>
    </div>
</body>

</html>

显示效果 :
css伪类选择器,CSS,css3,css,html,前端,结构伪类选择器文章来源地址https://www.toymoban.com/news/detail-755555.html

到了这里,关于【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(53)
  • 5 CSS伪类选择器

    5 伪类选择器 anchor伪类:专用于控制链接的显示效果 More Actions:link a:link 选择所有未被访问的链接。 :visited a:visited 选择所有已被访问的链接。 :active a:active 选择活动链接。 :hover a:hover 选择鼠标指针位于其上的链接。 before after伪类 before/after伪类相当于在元素内部插入两个额外

    2024年02月12日
    浏览(51)
  • css,类选择器,id选择器,伪类选择器

    四个伪类选择器顺序不能换 id选择器class选择器标签选择器

    2024年02月13日
    浏览(48)
  • CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)

            前言:学习CSS就必须要学习选择器,在之前我们已经学习了基本选择器和复合选择器,但是还有几个选择器没有学习,这篇文章主要讲解伪类选择器。 ✨✨ ✨ 这里是秋刀鱼不做梦的BLOG ✨✨✨ 想要了解更多内容可以访问我的主页 秋刀鱼不做梦-CSDN博客 那么废话不多

    2024年04月17日
    浏览(48)
  • CSS - 选择器详解 - 子代、后代选择器详解 - 伪类选择器 - 测试

    新建一个测试项目文件夹 test ,然后在 test 文件夹内新建一个名为 css 的文件夹,创建一个名为 style.css 的文件,最后在 test 文件夹下新建一个 test.html 文件。 test | —— | | ——css —— style.css | test.html 选择子节点 父节点 (父标签) | 子节点 (子标签) eg: ul 是父标签,而

    2024年02月05日
    浏览(49)
  • 【前端 - CSS】第 16 课 - 伪类选择器(鼠标悬停状态)

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。   目录 1、缘起 2、伪类选择器 3、伪类 - 超链接(拓展) 4、总结         在 CSS 中,我们使用 hover  表示 该元素在鼠标悬停状态下的样式 。         伪类依附于

    2024年02月10日
    浏览(42)
  • 【css伪类选择器及透明度——附项目图片及代码】

    不知不觉,又鸽了好长时间了,非常抱歉,没办法,毕竟开学了,今天课少,抽出了两个小时写了一篇css的,每天不是被催更,就是在催更的路上。放心,小陈陈有时间一定会给大家分享好玩的作品。 让大家欢声笑语中学到新知识,文章大概写了3个半小时,到目前为止已完

    2023年04月09日
    浏览(43)
  • CSS选择器-CSS3属性

    持续更新… 1、CSS3的概念和优势 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、

    2024年02月11日
    浏览(42)
  • 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

    链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 : 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ; 已访问链接样式 : 点击过的链接 , 链接变成该样式 ; 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ; 选定链接样式 : 按下鼠标松开时 ,

    2024年02月04日
    浏览(53)
  • css3 - 属性选择器

    2024年02月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包