CSS中的选择器

最新推荐文章于 2025-03-27 11:04:28 发布

米白的三敛

最新推荐文章于 2025-03-27 11:04:28 发布

阅读量2.1k

点赞数 9

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2301_76819511/article/details/130673873

版权

CSS中的选择器包括5种，分别是简单选择器，组合器选择器，属性选择器，伪类选择器和伪元素选择器。

一.简单选择器

简单选择器包括四种，分别是标签选择器，ID选择器，类选择器和通配符选择器。

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

2.ID选择器：通过获取标签里ID的属性来设置对应的样式，其中格式是 #+id属性值。

3.类选择器：通过获取class的相关属性设置对应的样式，其中格式是 .+class属性值。

4.通配符选择器：通过*选择页面上所有的HTML元素gege。

<!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;
            color: aqua;
            border: 1px solid black;
        }
        /* ID选择器 */
        #one{
            font-size: 30px;
            color: bisque;
        }
        /* 类选择器*/ 
        .box{
            font-size: 50px;
            color: blue;
        }
        /* 通配符选择器 */
        *{
            color: blueviolet;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p id="one">这是一个段落标签</p>
    <div class="box"> 这是第二个div</div>
    <hr>
    <ul>
        <li>哈哈哈哈哈</li>
        <li>呜呜呜呜呜</li>
        <li>嘘嘘嘘嘘嘘</li>
        <li>噫噫噫噫噫</li>
    </ul>
</body>
</html>

二.包含选择器

包含选择器共有五种，其中有子代选择器，后代选择器，分组选择器，相邻兄弟选择器和通用兄弟选择器。

1.子代选择器：获取某个标签的第一级子标签，格式指定元素>子元素{属性名称：属性值；}

2.后代选择器：后代选择器匹配属于指定元素后代的所有元素。

3.分组选择器：又叫做逗号选择器，可以设置多个标签用逗号进行分割。

4.相邻兄弟选择器：相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。格式指定元素+同级元素{属性名称：属性值}。

5.通用兄弟选择器：通用兄弟选择器匹配属于指定元素的同级元素的所有元素。格式指定元素~同级元素{属性名称：属性值}。

<!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>
    /* 子代选择器 */
    .list>ul{
        font-size: 30px;
        border: 1px;
        color: aqua;
    }
    /* 后代选择器 */
    .list li{
        font-size: 20px;
        color: bisque;
    }
    /* 分组选择器 */
    #one,.box{
        color: blue;
    }
    /* 相邻兄弟选择器 */
    h1 + h2{
        color: blueviolet;
    }
    /* 通用兄弟选择器 */
   p ~ h3{
    color: brown;
   }

  </style>
       
</head>
<body>
    <h1>这是一个标题</h1>
    <h2>这也是标题</h2>
    <p id="one">这是一个段落标签</p>
    <h3>这是第三个标题</h3>
    <div class="box">这是一个div</div>
    <div class="list">
        <ul>
            这是无序列表
            <li>哈哈哈</li>
            <li>噫噫噫</li>
            <li>呜呜呜</li>
            <li>啊啊啊</li>
        </ul>
    </div>
</body>
</html>

三.属性选择器

根据属性或属性值来选取元素，有以下形式：

表示方法	描述
[属性名称]	选择标签中的某个值
[属性名称=“属性值”]	确切的等于某个值
[属性名称*=“属性值中的某一个字母]	选择属性中包含这个字母的值
[属性名称^="属性值”]	属性中的值以该值开始
[属性名称$="属性值"]	属性中的值以该值结束
属性值+标签	表示下一个标签
[属性名称\|=“属性值”]	用于选取带有以指定值开头的属性值的元素，且该值必须是整个单词
[属性名称~=“属性值”]	用于选取属性值中包含指定词汇的元素

1.[属性名称]

<!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>
.one[class]{
    color: aqua;
}

 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <div id="two">呜呜呜</div>
</body>
</html>

2.[属性名称=“属性值”]

<!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[class="one"]{
    color: brown;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <div id="two">呜呜呜</div>
</body>
</html>

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[class*="w"]{
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <div class="two">呜呜呜</div>
</body>
</html>

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[class^="o"]{
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <div class="two">呜呜呜</div>
</body>
</html>

5.[属性名称$="属性值"]

<!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[class$="o"]{
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <div class="two">呜呜呜</div>
</body>
</html>

6.属性值+标签

<!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 + p {
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <p>啊啊啊</p>
    <div class="two">呜呜呜</div>
</body>
</html>

7.[属性名称|=“属性值”]

<!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>
[class|="one"] {
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <p>啊啊啊</p>
    <div class="two">呜呜呜</div>
</body>
</html>

8.[属性名称~=“属性值”]

<!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>
[class~="two"] {
    color: blueviolet;
}


 </style>
       
</head>
<body>
    <div class="one">哈哈哈</div>
    <p>啊啊啊</p>
    <div class="two">呜呜呜</div>
</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: aqua;
        }
        /* 点击之后 */
        a:visited{
            color: bisque;
        }
        /* 悬停时 */
        a:hover{
            color: blue;
        }
        /* 激活时 */
        a:active{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/?tn=21002492_51_hao_pg">点我</a>
</body>
</html>

五.伪元素选择器

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

<!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::before{
           content:"张三说" ;
           color: aquamarine;
        }
        P::after{
            content: "哈哈哈";
            color: blue;
        }
        p::selection{
            color: blueviolet;
        }
        p::first-line{
            color: brown;
        }
        p::first-letter{
            color: chartreuse;
        }
    </style>
</head>
<body>
    <p>你好漂亮</p>
</body>
</html>