CSS结构伪类选择器

最新推荐文章于 2024-04-16 16:18:11 发布

约瑟芬儿

最新推荐文章于 2024-04-16 16:18:11 发布

阅读量93

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qishi45/article/details/117004390

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    
    <!--伪类选择器:结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素.
    从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。  " ："-->
    
    <style>

/*     避免使用id选择器和class选择器     */
    /*      选中ul的第一个子元素
         p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
         需要注意的是，结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1.
         而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
    */
    ul li:first-child{
        background: #296eb3;
    }
    /*      选中ul的最后一个子元素       */
    ul li:last-child{
        background: #711471;
    }

    /*
        选中p2 ： 定位到父元素，选择当前的第2个元素
        p:nth-child(1) : 选择所有n元素的第n个子元素
        选中当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效（按顺序选择）
    */
    p:nth-child(2){
        background: aquamarine;
    }
    /*选中父元素下的p元素的第四个，（按类型选择）*/
    p:nth-of-type(4){
        background: #98be3e;
    }

    /*a:hover{*/
    /*    background: blueviolet;*/
    /*}*/

    </style>
</head>
<body>


<p>p1</p>

<p>p2</p>

<p>p3</p>

<p>p4</p>

<ul>

  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

<!--<a href="">123</a>-->
</body>
</html>

在这里插入图片描述

约瑟芬儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS结构伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>结构伪类选择器</title>  <style>
复制链接

扫一扫