一.标签选择器
结构: 标签名{css属性名: 属性值;}
作用:通过标签名，找到页面中所有这类标签，设置样式
注意点
- 1.标签选择器选择的是一类标签，而不是单独某一个
- 2.标签选择器无论嵌套关系有多深，都能找到对应的标签
具体示例（选中p标签）：
<style>
p{
color: aqua;
background-color: antiquewhite;
font-size: 40px;
width: 400px;
height: 400px;
}
</style>
二.类选择器
结构:.类名 {css属性名: 属性值;}
作用:通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点:
- 1.所有标签上都有class属性，class属性的属性值称为类名 (类似于名字)
- 2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 3.一个标签可以同时有多个类名，类名之间以空格隔开
- 4.类名可以重复，一个类选择器可以同时选中多个标签
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.blue {
color: blue;
}
.size {
font-size: 66px;
}
</style>
</head>
<body>
<p>111111</p>
<p class="blue size">222222</p>
</body>
</html>
三.id选择器
结构: #id属性值{ css属性名: 属性值;}
作用: 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:
- 1.所有标签上都有id属性
- 2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
- 3.一个标签上只能有一个id属性值
- 4.一个id选择器只能选中一个标签
具体示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#blue {
color: skyblue;
}
</style>
</head>
<body>
<!-- 一个页面只能存在一个id，一个标签只能有一个id，一个id选择器只选中一个标签，为后面配合js使用 -->
<div id="blue">11111111</div>
</body>
</html>
四.通配符选择器
结构:*{css属性名: 属性值;}
作用:找到页面中所有的标签，设置样式
注意点:开发中使用极少，只会在极特殊情况下才会用到在基础班小页面中可能会用于去除标签默认的margin和padding
具体示例：
<style>
* {
color: skyblue;
margin: 0;
padding: 0;
}
</style>
1778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
