css选择器

最新推荐文章于 2023-09-05 10:06:10 发布

sj_xzh_1017

最新推荐文章于 2023-09-05 10:06:10 发布

阅读量94

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/sj_xzh_1017/article/details/130748107

版权

本文详细介绍了CSS选择器的五种主要类型：基本选择器（标签、ID、类、通配符），包含选择器（子代、后代、分组），属性选择器，以及伪类和伪元素选择器。每个选择器类型都通过实例展示了其用法和效果，包括不同选择器的优先级和应用场景。

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

css选择器有基本选择器，包含选择器，属性选择器，伪类选择器，伪元素选择器五大类。

基本选择器

基本选择器有四种：

1.标签选择器（根据标签的名称设置对应样式）

2.ID选择器（通过获取标签里面的ID属性去设置对应样式，设置时#+id的属性值）

3.类选择器（通过获取标签里的class属性去设置对应样式，设置时.+class的属性值）

4.通配符选择器（通过*设置对应样式）

<!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>基本选择器</title>
    <style>
        /* 标签选择器 */
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            color: aqua;
        }
        /*ID类选择器*/
        #one{
            color: deepskyblue;
        }
        /*类选择器*/
        .box{
            color: brown;
        }
        /* 通配选择器 */
        *{
            color: rgb(150, 160, 216);
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p id="one">这是一个段落标签</p>
    <div class="box">这是第二个div</div>
    <hr>
    <ul>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</li>
    </ul>
</body>
</html>

四种选择器的优先级为：

id选择器>类选择器>标签选择器>通配选择器

包含选择器

包含选择器有三种

1.子代选择器（获取的某个标签的第一级子标签）

2.后代选择器（获取的某个标签的所有子标签）

3.分组选择器（也叫逗号选择器，可以设定多个标签，使用逗号进行分割）

<!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>包含选择器</title>
    <style>
        /* 子代选择器 */
        div.list > ul{
            border: 1px solid red;
        }
        /* 后代选择器 */
        .list li{
            border: 1px solid rgb(71, 166, 230);
        }
        /* 分组选择器 */
        #one,.box,h1{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <h1>这是一个标签</h1>
    <p id="one" class="two">这是一个段落标签</p>
    <div class="box">这是一个div</div>
    <div class="list">
        <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>
        <li>这是列表9</li>
        <li>这是列表10</li>
        <li>这是列表11</li>
    </div>
</body>
</html>

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

<!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>属性选择器</title>
    <style>
        /* 选择某个标签中存在的某个值 */
        .container{
            color: blueviolet;
        }
        div[title]{
            color: aquamarine;
        }
        /* 确切的等于某个值 */
        input[type="text"]{
            background: red
        }
        /* 属性里面包含某个值 */
        input[type *="e"]{
            background: blue;
        }
        /* 属性中的值以xxx开始 */
        input[type ^="e"]{
            background-color: aqua;
        }
        
    </style>
</head>
<body>
    
</body>
</html>

伪类选择器

伪类：同一标签在不同状态下，有不同的样式

伪类通过冒号表示

伪类选择器最早主要是用来渲染a标签不同状态下的不同样式

超链接点击之前---:link

超链接被访问后----：visited

鼠标放在超链接上时----:hover

超链接被激活时（点击超链接时）---:active

<!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>伪类选择器</title>
    <style>
/* 超链接点击之前的颜色 */
a:link{
    color: red;
}
/* 超链接点击之后的颜色 */
a:visited{
    color:orange;
}
/* 鼠标悬停时的颜色 */
a:hover{
    color:green;
}
/* 超链接被激活是的颜色 */
a:active{
    color:blue
}
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击</a>
</body>
</html>

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效

伪元素选择器

:before----css2中

:after------css2中

::before-----css3中

::after-------css3中

使用before和after时一定要给上content属性

<!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>伪元素选择器</title>
    <style>
        p{
            color: red;
            font-size: 20px;
        }
        p::before{
            content: "张三说";
            color: aquamarine;
        }
        p::after{
            content: "对不对";
            color: aqua;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>