CSS中的选择器

最新推荐文章于 2024-09-20 02:44:07 发布

Sky---dog

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量1.6k

点赞数 5

文章标签： css 前端 html

本文链接：https://blog.csdn.net/zhoujianjin666/article/details/130773707

版权

本文详细介绍了CSS中的选择器类型，包括基本选择器（标签、ID、类、通配符），它们的优先级以及使用示例。接着讨论了包含选择器，如子代和后代选择器以及分组选择器的运用。此外，还讲解了属性选择器的工作原理和不同匹配方式。最后，探讨了伪类和伪元素选择器，用于在不同状态或位置下改变元素样式。

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

一、基本选择器

基本选择器有四种：标签选择器、ID选择器、类选择器、通配符选择器。

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

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

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

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

优先级：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>基本选择器</title>
    <style>
        /*标签选择器*/
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            color: aquamarine;
        }
        /*ID选择器*/
        #one{
            color: blueviolet;
        }
        /*类选择器*/
        .box{
            color: blue;
        }
        /*通配符选择器*/
        *{
            color: darkgreen;
        }
    </style>
</head>
<body>
    <div>标签选择器效果</div>
    <p id="one">ID选择器效果</p>
    <div class="box">这是类选择器效果</div>
    <hr>
    <ul>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</li>
        <li>这是列表1</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 red;
        }
        /*后代选择器*/
        .list li{
            border: 1px solid green;
        }
        /*分组选择器*/
        #one,.box,h1{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">ID选择器效果</p>
    <div class="box">这是类选择器效果</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>
        </ul>
        <li>这是列表8</li>
        <li>这是列表9</li>
        <li>这是列表10</li>
    </div>
</body>
</html>

三、属性选择器

属性选择器写法：标签名[属性] { 样式 }

只要有 type 属性的 input 标签样式都会发生变化，也可以给属性加上属性值来限制条件。

input[type="text"] ---- 只有 type 属性的属性值为 text 的 input 标签样式才会生效。

*= 代表只要满足条件的都生效，只要 type 这个属性中包含=后面的值就会生效。

^= 代表属性中的值以xxx开始，只要 type 这个属性中包含=后面的值就会生效。

$= 代表属性里面包含以xxx结尾，只要 type 这个属性中包含=后面的值就会生效。

<!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: red;
        }
        div[title]{
            color: blue;
        }
        /*确切的等于某个值*/
        input[type="text"]{
            background: red;
        }
        /*属性里面包含某个值*/
        input[type *="x"]{
            background: violet;
        }
        /*属性里面包含以xxx开始*/
        input[type ^="e"]{
            background: green;
        }
        /*属性里面包含以xxx结尾*/
        input[type $="rl"]{
            background: orange;
        }
        /*表示下一个标签*/
        .msg + p{
            color: rgb(220, 255, 196);
        }
        /*属性等于某个值*/
        [title="这是一个标题"]{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div容器</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="王五">
    <input type="url" value="李四">
    <hr>
    <div class="msg">我喜欢吃好吃的</div>
    <p class="msg2">这是一个段落</p>
</body>
</html>

四、伪类选择器

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

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

伪类通过冒号表示

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

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

2.超链接被访问之后-----------------------:visited

3.鼠标放在超链接上的时候(悬停)------:hover

4.超链接激活的时候(鼠标点击便签但是不松手的时候):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: green;
        }
        /*超链接被激活的时候的颜色是蓝色*/
        a:active{
            color: blue;
        }
        div:hover{
            color: blueviolet;
            border: 1px solid black 
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击</a>
    <div>这是一个div标签</div>
</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: red;
            font-size: 20px;
        }
        p::before{
            content:"张三说";
            color: blueviolet;
        }
        p::after{
            content:"对不对？";
            color: goldenrod;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>