css选择器总结

最新推荐文章于 2024-09-15 21:53:51 发布

谁把我睡的觉偷了xhxh

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量40

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/printf_printf_/article/details/130673797

版权

文章详细介绍了CSS中的基本选择器类型，包括标签选择器、ID选择器、类选择器和通配符选择器，以及它们的优先级。同时，还展示了包含选择器（子代、后代和分组选择器）和属性选择器的用法，以及伪类和伪元素选择器的应用，如超链接的不同状态和内容插入。

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

基本选择器

基本选择器有四种,包括标签选择器,id选择器,类选择器,通配符选择器.

标签选择器------根据标签的名称设置对应的样式

id选择器------通过获取标签里面俺的ID属性设置对应样式，通过"#"加上id的值

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

通配符选择器------能够给每一个标签加上对应的样式,通过*设置对应的样式

优先级： id选择器>类选择器>标签选择器>通配符选择器

<!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>Document</title>
    <style>
        /*标签选择器*/
        div{ 
            width: 200px;
            height: 200px;
            border: 1px solid black;
            color: azure;
        }
        /* ID选择器 */
        #one{
            color: blueviolet;
        }
        /* 类选择器 */
        .box{
            color: aquamarine;
        }
        /* 通配符选择器 */
        *{
            color: brown;
        }
    </style>
</head>
<body>
    <!-- 
选择器：
    标签选择器(根据标签的名称设置对应的样式)
    id选择器(通过获取标签里面俺的ID属性设置对应样式，通过#加上id的值)
    类选择器(通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值)
    通配符选择器(能够给每一个标签加上对应的样式,通过*设置对应的样式)
    优先级：
    id>类选择器>标签选择器>通配符选择器-->
    <div>这是一个div</div>
    <p id="one">这是一个段落标签</p>
    <div class="box">这是第二个div</div> 
    <hr>
    <ul>
        <li>这是列表1</li>
        <li>这是列表2</li>
        <li>这是列表3</li>
    </ul>
</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>
        /* 子代选择器 */
        div.list>ul{
            border: 1px solid aqua;
        }
        /* 后代选择器 */
        .list li{
            border: 1px solid rgb(58, 53, 53);
        }
        /* 分组选择器 */
        #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>
        </ul>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</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[class]{
        color: blue;
    }
    div[title]{
        color: aqua;
    }
    /* 确切的等于某个值的时*/
    input[type="text"]{
        background-color: brown;
    }
    /* 属性里面包含某个值的时候 */
    input[type *="e"]{
        background-color: chartreuse;
    }
    /* 属性中的值以xxx开始 */
    input[type ^="e"]{
        background-color: rgb(25, 25, 24);
    }
    /* 属性中的值以xxx结尾 */
    input[type $="rl"]{
        background-color: rgb(90, 123, 57);
    }
    /* 表示下一个标签 */
    .msg + p{
        color: darkcyan;
    }
    </style>
</head>
<body>
    <div class="container">这是一个div容器</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="text" value="李四">
    <input type="text" value="王五">
    <hr>
    <div class="msg"> 1111</div>
    <p id="msg2"> 2222</p>
</body>
</html>

伪类选择器

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

伪类通过冒号表示

最早的时候主要是用来渲染a标签不同状态下的不同样式

超链接点击之前————link

超链接被访问之后————visited

鼠标放在超链接上的时候（悬停）————hover

超链接被激活（鼠标点击标签但是不松手）的时候————active

注意：对于a标签的四种状态顺序是一定的（a：link a：visited a：hover a：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: rgb(7, 250, 32);
        }
        /* 超链接被激活的颜色是蓝色 */
        a:active{
            color: rgb(9, 176, 241);
        }
        div:hover{
            color: aqua;
            border: 1px solid black;
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <!-- 伪类选择器：同一个标签在不同的状态下，有不同的样式
    伪类通过冒号表示
    最早的时候主要是用来渲染a标签不同状态下的不同样式
    超链接点击之前————link
    超链接被访问之后————visited
    鼠标放在超链接上的时候（悬停）————hover 
    超链接被激活的时候————active
    注意：对于a标签的四种状态顺序是一定的
    -->
    <a href="css包含选择器.html">111111</a>
</body>
</html>

伪元素选择器

：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: aquamarine;
            font-size: 20px;
        }
        p::before{
            content: "张三说";
            color: brown;
        }
        p::after{
            content: "不对";
            color: rgb(245, 8, 127);
        }
    </style>
</head>
<body>
    <!-- 伪元素选择器
    ：before————css2
    ：after————css2
    ：：before————css3
    ：：after————css3
    注意：使用before和after的时候一定给要写上content属性-->
    <p>这个段落</p>
</body>
</html>