CSS结构伪类选择器

思诚代码块

已于 2022-06-03 19:00:23 修改

阅读量138

点赞数

分类专栏： CSS 系列笔记+源码展示文章标签： css css3 前端

于 2022-01-28 18:32:17 首次发布

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122734369

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天分享一下css的结构伪类选择器

写个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>



</ul>
</body>
</html>

第一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul标签当中的第一个元素进行颜色调节*/
    ul li:first-child{
        background: blue;
    }

    
    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>



</ul>
</body>
</html>

显示结果：
在这里插入图片描述

第二个：

   /*ul标签当中的最后一个元素进行颜色调节*/ 
   ul li :last-child{
       background: green;

结果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul标签当中的第一个元素进行颜色调节*/
    ul li:first-child{
        background: blue;
    }
        /*ul标签当中的最后一个元素进行颜色调节*/

   ul li:last-child{
       background: green;
   }

    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>



</ul>
</body>
</html>

  /*选中p1,定位到父元素，选中当前的第一个*/
   p:nth-child(1){
       background: brown;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul标签当中的第一个元素进行颜色调节*/
    ul li:first-child{
        background: blue;
    }
        /*ul标签当中的最后一个元素进行颜色调节*/

   ul li:last-child{
       background: green;
   }
   /*选中p1,定位到父元素，选中当前的第一个*/
   p:nth-child(1){
       background: brown;
   }

    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>



</ul>
</body>
</html>

结果：
在这里插入图片描述

全部源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 避免使用class，id选择器   -->
    <style>
      /*ul的第一个子元素*/
      ul li:first-child{
          background: blue;
      }
    /*  ul的最后一个子元素*/
ul li:last-child {
    background: green;
}
    /*选中p1: 定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*   顺序/
      p:nth-child(1){
          background: aqua;
      }
      /*选择父元素下的p元素的第二个，   类型*/
      /*p:nth-of-type(2){*/
      /*    background: bisque;*/
      /*}*/
      /*a:hover{*/
      /*    background: aquamarine;*/
      /*}*/
    </style>
</head>

<body>
<a href="http://www.baidu.com">1234</a>
<!--     <h1>h1</h1>-->
      <p>p1</p>
      <p>p2</p>
       <p>p3</p>
       <ul>
           <li>li1</li>
           <li>li2</li>
           <li>li3</li>

       </ul>

</body>
</html>

好了，CSS结构伪类选择器就讲到这了，谢谢大家。

思诚代码块

关注

0
点赞
踩
1

收藏

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

大家好，今天分享一下css的结构伪类选择器写个实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><body><p>p1</p><p>p2&
复制链接

扫一扫