css选择器_控制台css选择器-CSDN博客

本文链接：https://blog.csdn.net/yyjnhs18s/article/details/129865810

本文详细介绍了CSS中的各种选择器，包括基本选择器（标签选择器、ID选择器、类选择器、通用选择器）以及更复杂的选择器如包含选择器（子代选择器、后代选择器）、属性选择器和伪类与伪元素选择器。这些选择器用于高效地修改网页元素的样式，如颜色、字体和布局等。

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

选择器可以做到在同一时间统一修改大量数据的格式，包括颜色、字体大小、高度、宽度、文本修饰、背景图片等。其中，选择器可以大略分为五种不同的选择器

1.基本选择器

基本选择器分为四种，分别是标签选择器、ID选择器、类选择器、通用选择器。其中，每个标签的id必须是唯一的，但是class可以不唯一。不同的选择器同时包括了同一个标签时，ID > class > 标签 > 通配符

选择器书写在head部分里，使用style标签。

1.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>Document</title>
    
    <style>
        div{
            color: blue;
        }
    </style>

</head>
<body>
    <div>这是一个div</div>
</body>
</html>

1.2 ID选择器

此选择器通过标签的id来控制对应标签，一个id只能有一个对应的标签。使用 #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>
        #one{
            color: rgb(41, 198, 83);
        }
    </style>

</head>
<body>
    <div id="one" class="two">这是一个div</div>
</body>
</html>

1.3 类选择器

此选择器通过标签中的class值来控制对应标签，因为class值不唯一，所以可以同时控制多个标签。使用 .class值 {} 的格式。

<!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>
        .two{
            color: rgb(41, 44, 198);
        }
    </style>

</head>
<body>
    <div id="one" class="two">这是一个div</div>
    <div  class="two">这是另一个div</div>
</body>
</html>

1.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>Document</title>
    
    <style>
        *{
            color: rgb(236, 212, 34);
        }
    </style>

</head>
<body>
    <div id="one" class="two">这是一个div</div>
    <div  class="two">这是另一个div</div>
</body>
</html>

2.包含选择器

2.1子代选择器

获取某个标签下的第一级子标签（如图，只有ul标签下的内容会被改变）

<!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>
        .two>ul{
            color: rgb(238, 187, 34);
        }
    </style>

</head>
<body>
    <div id="one" class="two">
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
      </ul>
      <ol>
        <li>21</li>
        <li>22</li>
        <li>23</li>
      </ol>
    </div>
   
</body>
</html>

2.2后代选择器

获取某个标签后的所有子标签（如图，所有li 标签都会被改变）

<!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>
        .two li{
            color: rgb(29, 149, 101);
        }
    </style>

</head>
<body>
    <div id="one" class="two">
      <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
      </ul>
      <ol>
        <li>21</li>
        <li>22</li>
        <li>23</li>
      </ol>
    </div>
   
</body>
</html>

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>Document</title>
    
    <style>
        #two,.one{
            color: rgb(198, 233, 45);
        }
    </style>

</head>
<body>
    
    <div id="two">这是一个div</div>
    
    <div class="one">这是另一个div</div>

</body>
</html>

3.属性选择器

此选择器根据不同的属性选择标签，属性选择器中的属性在[ ]括号内表示

3.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>Document</title>
    
    <style>
        [title]{
            color: rgb(229, 64, 207);
        }
    </style>

</head>
<body> 
    <div title="存在一个title属性">这是一个div</div>
</body>
</html>

3.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>Document</title>
    
    <style>
       [type="text"]{
            color: rgb(236, 114, 33);
        }
    </style>

</head>
<body> 
    <input type="text" value="一个text">
    <input type="email" value="一个email">
    <input type="button" value="一个button">
</body>
</html>

3.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>Document</title>
    
    <style>
       [type*="e"]{
            color: rgb(29, 188, 114);
        }
    </style>

</head>
<body> 
    <input type="text" value="一个text">
    <input type="email" value="一个email">
    <input type="button" value="一个button">
</body>
</html>

3.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>Document</title>
    
    <style>
       [type^="e"]{
            color: rgb(233, 37, 240);
        }
    </style>

</head>
<body> 
    <input type="text" value="一个text">
    <input type="email" value="一个email">
    <input type="button" value="一个button">
</body>
</html>

3.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>Document</title>
    
    <style>
       [type$="on"]{
            color: rgb(240, 216, 37);
        }
    </style>

</head>
<body> 
    <input type="text" value="一个text">
    <input type="email" value="一个email">
    <input type="button" value="一个button">
</body>
</html>

3.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>Document</title>
    
    <style>
       .one +p{
            color: rgb(93, 232, 77);
        }
    </style>

</head>
<body> 
     <div class="one"  title="存在一个title属性">这是一个div</div>
     <p>这是一个段落</p>
</body>
</html>

4.伪类选择器

伪类是一个标签在不同状态下的不同样式，使用：来设置，通常使用在链接、按钮等标签中。

通常有四种状态

状态	名称
悬浮于此标签上	: hover
点击此标签不放	: active
使用此标签之后	: visited
未使用此标签	: link

在使用时，最好以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>Document</title>
    
    <style>
    input:link{color: rgb(247, 7, 7);}
    input:visited{color: rgb(72, 57, 237);}
    input:hover{color: rgb(238, 87, 210);}
    input:active{color: rgb(66, 192, 108);}
    </style>
</head>
<body> 
    <input type="button" value="点击">
</body>
</html>

5.伪元素选择器

使用::before 与 ::after 时，要在选择器内加上content属性，其中::before代表段落之前，::after代表段落之后

<!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>
       p::before{
        content: "这是before";
       }
       p::after{
        content: "这是after";
       }
    </style>
</head>
<body> 
    <p>这是一个段落</p>
</body>
</html>