CSS选择器
即选择（查找）html标签的方法
-
格式：
选择器 { 样式属性1:取值1; 样式属性2:取值2; …… }
一、基本选择器
1、元素选择器
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
语法：
? 元素符号{属性：属性值；...}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>博客园</div>
<p>博客园</p>
<span>博客园</span>
<div>博客园</div>
</body>
</html>
效果：
2、id选择器
我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。（? 注意：在同一个页面中，不允许出现两个相同的id）
语法：
#id名称{属性：属性值;...}
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box{color:red;}
</style>
</head>
<body>
<div>博客园</div>
<div id="box">博客园</div>
<div>博客园</div>
</body>
</html>
- id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。
3、类选择器
class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。
语法：
.class名称{属性：属性值；...}
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{color:red;}
</style>
</head>
<body>
<div>博客园</div>
<p class="box">博客园</p>
<span class="box">博客园</span>
<div>博客园</div>
</body>
</html>
分析：
? p元素和span元素是两个不同的元素，但是我们可以为这两个不同的元素设置相同的class，这样就可以同时为这两个不同的元素设置相同的CSS样式了。
4、子元素选择器
子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。
语法：
#父元素 #子元素{属性：属性值}
? 父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#father1 div{color:blue;}
#father2 #p1{color:red;}
</style>
</head>
<body>
<div id="father1">
<div>博客园</div>
<div>博客园</div>
</div>
<div id="father2">
<p id="p1">博客园</p>
<p id="p2">博客园</p>
<span>博客园</span>
</div>
</body>
</html>
效果：
5、群组选择器
群组选择器，就是同时对几个选择器进行相同的操作。常常，我们的CSS 样式中会有好几个地方需要使用到相同的设定时，一个一个分开写重覆性太高且显得冗长，更不好管理....在CSS 语法的基本设定中，就可以把这几个相同设定的选择器合并在一起，原本可能是写了7~8 行相同的语法，合在一起后就只要短短的一小行
语法：
选择器1,选择器2...{属性：属性值}
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
h3,div,p,span{color:red;}
</style>
</head>
<body>
<h3>博客园</h3>
<div>博客园</div>
<p>博客园</p>
<span>博客园</span>
</body>
</html>
参考文章：https://blog.csdn.net/wuyxinu/article/details/103583618