包含选择器、属性选择器和伪类选择器的使用-CSDN博客

本文链接：https://blog.csdn.net/2303_79294020/article/details/136197555

本文详细介绍了HTML和CSS中的不同选择器，包括子代选择器、后代选择器、分组选择器、属性选择器（如[type]、[title]等）、伪类选择器（如link、visited、hover、active）以及伪元素选择器（:before和:after）。这些选择器用于精确控制网页元素的样式和状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="..\css\demo01.css"> -->
<style>
    /* 子代选择器 */
div.list>ul{
    /* 这里的div可以不写,这里的>表示第一级子标签 */
    border: 1px solid red;
}
/* 后代选择器 */
.list li{
border: 1PX solid rgb(49, 24, 212);
}
/* 分组选择器（逗号选择器） */
.one,.two,#first{
    color: blueviolet;
    width: 200px;
    height: 200px;
    background-color: pink
}
</style>
</head>
<body>
    <!-- 包含选择器
    子代选择器：获得莫格标签的第一级子标签
    后代选择器：获取某个标签的所有子标签
    分组选择器：逗号选择器，可以同时设置多个标签，使用逗号分隔 -->
    <div class="one">这是第一个div</div>
    <div class="two">这是第二个div</div>
    <p id="first">这是一个段落
    </p>
    <div class="list">
        <ul>
            <!-- ul是第一级子标签 ，可以理解为div的儿子，而下面的li这是ul的儿子-->
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
            <li>这是列表6</li>
            <li>这是列表7</li>
            <li>这是列表8</li>
        </ul>
    </div>
</body>
</html>

属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择某个标签存在的某个属性值 */
        div[title]{
            /* 这里表示只想写title这个属性的div */
            border: 1px solid red;
        }
        /* 确切的等于某个值 */
        input[type]{
            background: blue;
        }
        /* 属性值一xxx为开头 */
        input[type ^="e"]{
            /* 这里表示以type命名以e开头的变为绿色 */
            background: green;
        }
        /*  属性值一xxx结尾 */
        input[type $="rl"]{
            /* 这里表示以type命名以rl结尾的变为黑色 */
            background: black;
        }
        /* 以属性包含某个值是以*表示 */
        /* + 表示下一个标签 */
        .msg+p{
            /* 表示msg这个标签的下一个标签 */
            border: 1px solid brown;
        }
        /* 确切的某个值 */
        [class="container"]{
            background: pink;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    属性选择器
    <div class="container">
        <!-- 这是一个div的容器 -->
        这是一个div
    </div>
    <div title="这是一个标题">第二个</div>
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="邮箱">
    <input type="url" name="" id="" value="路径">
    <hr>
    <div class="msg">我喜欢ikun</div>
    <p id="msg1">这是一个段落</p>
</body>
</html>

伪类选择器

伪类选择器：同一个标签，根据不同的状态，有不同的样式，叫伪类

：link------链接点击之前

：visited-----链接点击之后

：hover-----悬停

：active---激活鼠标点击的时候不松手的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 点击之前 */
        a:link{
            color: red ;
        }
        /* 点击之后 */
        a:visited{
            color: blue;
        }
        /* 悬停的颜色 */
        a:hover{
            color: yellow;
        }
        /* 不松手 */
        a:active{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 伪类选择器：同一个标签，根据不同的状态，有不同的样式，叫伪类
    ：link------链接点击之前
    ：visited-----链接点击之后
    ：hover-----悬停
    ：active---激活鼠标点击的时候不松手的状态
    伪元素选择器 -->
    <a href="..\html\deom02.html">点击我</a>
</body>
</html>

伪元素选择器

<!-- 伪元素选择器

：:before---之前

：:after----之后

注意：在使用伪元素前一定要加上content

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before{
            content: "张三";
            color: brown;
        }
        p::after{
            content: "李四";
            color: green;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

这是有content的效果