注意权重由高到低（ID,类，标签）
ID选择器
- 使用“#”开头来表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的，不能被多个标签使用
#c1{
内容
}
<div id='c1'></div>
类选择器(用的最多)
特点：差异化表示不同的标签，可以让多个标签的都使用同一个标签
- 类名用“.”开头，标签使用class属性来调用。
- 一个类可以被多个标签使用，一个标签也能使用多个类。
- 多个类名要使用空格分割且类名不要使用纯数字，或者中文以及标签名来命名类名
.c1{
内容
}
<div id='c1'></div>
标签选择器
特点：能快速将同一类型的标签都选择出来，但是不能差异化选择
div{
内容
}
<div>xxx</div>
li{
内容
}
<ul>
<li>内容</li>
</ul>
# 以此类推
属性选择器
- 属性名
- 属性名=属性值
- 属性名^= (以某某开头的)
- 属性名$=属性值 (以某某结尾的)
- 属性名*=属性值 (包含某某)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
input[type='text'] {
border: 1px solid red;
}
.v1[xx="456"]{
color: gold;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<div class="v1" xx="123">测试</div>
<div class="v1" xx="456">测试</div>
<div class="v1" xx="789">测试</div>
</body>
</html>
加一个边框border: 1px solid
后代选择器
- 后代选择器较为精准格式为==.+自定义标签+空格+需要改变的标签==，如
.yy li{ color: aquamarine;} - 相当于精确命名来缩小范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
.yy li{
color: aquamarine;
}
</style>
</head>
<body>
<div class="yy">
<ui>
<li>日本</li>
<li>韩国</li>
<li>非洲</li>
<li>印度</li>
</ui>
</div>
<div></div>
<div>足球</div>
<div>羽毛球</div>
</body>
</html>
- 关于上面的选择器
多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器
往期回顾
1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】