CSS基础之结构伪类选择器

拄着拐儿唱儿歌

已于 2022-05-14 15:59:19 修改

阅读量317

点赞数

分类专栏： # HTML+CSS 文章标签： css html 前端 css3

于 2022-04-13 14:23:36 首次发布

本文链接：https://blog.csdn.net/qq_43615148/article/details/124145867

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

CSS基础之结构伪类选择器

一、结构伪类选择器的使用场景:

常用来查找某父级选择器的子元素
在这里插入图片描述

常见公式：

在这里插入图片描述

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
        li{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        /* 选中第一个给天蓝色 */
        ul li:first-child{
            background-color: skyblue;
        }
        /* 给偶数个为粉色 */
        ul li:nth-child(2n){
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="">这是我的第1个标签</a></li>
        <li><a href="">这是我的第2个标签</a></li>
        <li><a href="">这是我的第3个标签</a></li>
        <li><a href="">这是我的第4个标签</a></li>
        <li><a href="">这是我的第5个标签</a></li>
        <li><a href="">这是我的第6个标签</a></li>
        <li><a href="">这是我的第7个标签</a></li>
        <li><a href="">这是我的第8个标签</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

二、伪元素

一般为页面中不是很重要的部分，不在页面主体中，一般用于装饰性的不重要的小图。由CSS模拟出来的标签效果。

1、种类

在这里插入图片描述

2、注意：

（1）必须在content属性才能生效

（2）伪元素默认为行内元素。

举个栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB 2312">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .love::after{
            content: "你";
        }
        .love::before{
            content: "我";
        }
    </style>
</head>
<body>
    <div class="love">
        爱
    </div>
</body>
</html>