CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/104115242

本文深入讲解了CSS中的各种选择器，包括ID选择器、类选择器、标签选择器、通配符选择器和属性选择器，并阐述了它们的使用场景和优先级。掌握这些基础知识对于前端开发至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、选择器（两个文件的保存是相对路径的状态）
1、id选择器（一一对应）
在lesson3.1.html中写

<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>Document</title>
       <link rel="stylesheet" type="text/css" href="lesson3.1.css">
 </head>
 <body>
       <div id="only">123</div>
 </body>
 </html>

在lesson3.1.css中写

#only
 {   background-color:blue;   }

2、class标签（多对多）
在lesson3.1.html中写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body>
    <div class="demo demo1">123</div>
    <div class="demo ">234</div>
</body>
</html>

在lesson3.1.css中写

 .demo{
	background-color:yellow;
}
.demo1{
	color:#f40;
}

在id和class选择器的区别是选择器与元素之间的对应关系，css文件中id是#属性值{}
而class是.属性值{}

3、标签选择器
在lesson3.1.html中写

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body>
     <span>你好</span>
     <div>
       <span>选择</spn>
     </div>
</body>
</html>

在lesson3.1.css中写

span {
	color:#F40;
	font-weight:bold;
}

4、通配符选择器（运用于全局标签）
在lesson3.1.html中写

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body> 
    <div></div>
</body>
</html>

在lesson3.1.css中写

*{

 }

5、属性选择器
在lesson3.1.html中写

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="lesson3.1.css">
</head>
<body> 
    <div>123</div>
</body>
</html>

在lesson3.1.css中写