CSS选择器

@彤管

已于 2023-07-21 09:21:11 修改

阅读量96

点赞数

分类专栏：前端开发文章标签： css 前端

于 2023-07-20 22:01:02 首次发布

本文链接：https://blog.csdn.net/m0_58258716/article/details/131840861

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的基础选择器，包括标签选择器、类选择器、ID选择器和通配符选择器，以及进阶的选择器，如后代选择器、子代选择器、并集选择器和交集选择器。此外，还讲解了hover伪类选择器在元素状态改变时的样式设置。这些选择器在网页样式控制中起到关键作用。

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

一、基础选择器

1.1 选择器的作用

选择器的作用：

选择页面中对应的标签(找它)，方便后续设置样式(改它)

1.2 标签选择器

结构：标签名{css属性名:属性值;}

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

标签选择器选择的是一类标签，而不是单独某一个
标签选择器无论嵌套关系有多深，都能找到对应的标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>基础选择器</title>
     <style>
         p{
             color:red;
         }
     </style>
 </head>
 <body>
     <p>标签选择器</p>
     <div>
         <p>这是一个p标签</p>
     </div>
 </body>
 </html>

1.3 类选择器

结构：.类名{css属性名:属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头
一个标签可以同时有多个类名，类名之间以空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>类选择器</title>
     <style>
         .red{
             color:red;
         }
         .size{
             font-size: 66px;
         }
     </style>
 </head>
 <body>
     <p>1111</p>
     <p class="red size">2222</p>
     <div class="red">类选择器</div>
 </body>
 </html>

1.4 id选择器

结构：#id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值，设置样式

注意点：

所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>id选择器</title>
     <style>
         #blue{
             color:blue;
         }
     </style>
 </head>
 <body>
     <div id="blue">id选择器</div>
 </body>
 </html>

1.5 通配符选择器

结构：*{css属性名：属性值;}

作用：找到页面中所有的标签，设置样式

注意点：

开发中使用极少，只会在极特殊情况下才会用到
在小页面中可能会用于去除标签默认的margin和padding

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>通配符选择器</title>
     <style>
         *{
             color: red;
         }
     </style>
 </head>
 <body>
     <div>div</div>
     <p>ppppp</p>
     <h1>h1</h1>
     <span>span</span>
     <p>ppppp</p>
     <h2>h2</h2>
 </body>
 
 </html>

二、选择器进阶

1. 复合选择器

1.1 后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2{css}

结果：

在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，设置样式

注意点：

后代包括：儿子、孙子、重孙子...
后代选择器中，选择器与选择器之前通过空格隔开*/

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>复合选择器</title>
     <style>
         /* 找到div的儿子p设置文字颜色是红色 */
         .div .p{
             color: blue;
         }
     </style>
 </head>
 <body>
     <p>这是一个p标签</p>
     <div class="div">
         <p class="p">这是div的儿子p</p>
     </div>
 </body>
 </html>

1.2 子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1 > 选择器2{css}

结果：

在选择器1所找到标签的子代(儿子)中，找到满足选择器2的标签，设置样式

注意点：

子代只包括：儿子

2.子代选择器中，选择器与选择器之前通过>隔开

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>子代选择器</title>
     <style>
         div > a{
             color: red;
         }
     </style>
 </head>
 <body>
     <div>父级
         <a href="#">这是div里面的a</a>
         <p>
             <a href="#">这是div里面的p里面的a</a>
         </p>
     </div>
 </body>
 </html>

2.并集选择器: ,

作用：同时选择多组标签，设置相同的样式选择器语法：选择器1,选择器2{css} 结果：

找到选择器1和选择器2选中的标签，设置样式注意点：

并集选择器中的每组选择器之间通过,分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个，提高代码的可读性

 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>并集选择器</title>
     <style>
         p, div, span, h1{
             color: red;
         }
     </style>
 </head>
 <body>
     <p>ppp</p>
     <div>div</div>
     <span>span</span>
     <h1>h1</h1>
 
     <h2>h2</h2>
 
 </body>
 </html>

3.交集选择器:紧挨着

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2{css}

结果：

(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，标签选择器必须写在最前面

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>交集选择器</title>
     <style>
         p.box{
             color: red;
             }
     </style>
 </head>
 <body>
     <!-- 找到第一个p，带box类的，设置文字颜色是红色 -->
     <p class="box">这是p标签：box</p>
     <p>ppppppp</p>
     <div class="box">这是div标签：box</div>
 </body>
 </html>

4.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式选择器语法：选择器:hover{css} 注意点：

伪类选择器选中的元素的某种状态

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hover伪类选择器</title>
     <style>
         /* 悬停的时候文字颜色是红色 */
         a:hover{
             color: red;
         }
         /* 用户鼠标悬停到div的时候，文字是绿色 */
         div{
             height: 300px;
             width: 300px;
             background-color: pink;
         }
         div:hover{
             background-color: green
 
         }
     </style>
 </head>
 <body>
     <a href="#">这是超链接</a>
     <!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 -->
     <div>div</div>
 </body>
 </html>