css 选择器的定义
css 选择器是用来选择标签的，选出来以后给标签加样式。
css 选择器的种类
标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器通配符选择器标签选择器
概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用：
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
优点：
是能快速为页面中同类型的标签统一样式
缺点：
不能设计差异化样式。
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">p {color: red;}</style></head><body><div>hello</div><p>hello</p></body></html>
类选择器
根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。
类选择器使用“.”（英文点号）进行标识，后面紧跟类名.
语法：
类名选择器
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p class='类名'></p>
优点：
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
注意
类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
长名称或词组可以使用中横线来为选择器命名。
不要纯数字、中文等命名， 尽量使用英文字母来表示。
多类名注意：
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">.blue {color: blue}.big {font-size: 20px}.box {width: 100px;height: 100px;background: gold}</style></head><body><div class="blue">这是一个div</div><h3 class="blue big box">这是一个标题</h3><p class="blue box">这是一个段落</p></body></html>
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">.blue {color: blue;font-size: 100px;}.red {color: red;font-size: 100px;}.orange {color: orange;font-size: 100px;}.green {color: green;font-size: 100px;}</style></head><body><span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body></html>
层级选择器(后代选择器)
根据层级关系选择后代标签，以选择器1 选择器2开头，主要应用在标签嵌套的结构中，减少命名。
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">div p {color: red;}.con {width: 300px;height: 80px;background: green}.con span {color: red}.con .pink {color: pink}.con .gold {color: gold}</style></head><body><div><p>hello</p></div><div class="con"><span>哈哈</span><a href="#" class="pink">百度</a><a href="#" class="gold">谷歌</a></div><span>你好</span><a href="#" class="pink">新浪</a></body></html>
运行效果：
注意点:
这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器
id选择器
根据id选择标签，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
id选择器使用#进行标识，后面紧跟id名
其基本语法格式如下：
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p id="id名"></p>
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
示例代码
<style type="text/css">#box{color:red} </style><p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 --><p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 --><p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
注意点:
虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次，经常和javascript 搭配使用。
id选择器和类选择器最大的不同在于 使用次数上。
组选择器
根据组合的选择器选择不同的标签，以 , 分割开, 如果有公共的样式设置，可以使用组选择器。
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">.box1,.box2,.box3 {width: 100px;height: 100px}.box1 {background: red}.box2 {background: pink}.box2 {background: gold}</style></head><body><div class="box1">这是第一个div</div><div class="box2">这是第二个div</div><div class="box3">这是第三个div</div></body></html>
伪类选择器
用于向选择器添加特殊的效果,以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style type="text/css">.box1 {width: 100px;height: 100px;background: gold;}.box1:hover {width: 300px;}</style></head><body><div class="box1">这是第一个div</div></body></html>
通配符选择器
概念
通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {margin: 0;/* 定义外边距*/padding: 0;/* 定义内边距*/}
注意：
会匹配页面所有的元素，降低页面响应速度，不建议随便使用
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><style>* {color: pink;}.red {color: red;}li {color: green;}</style></head><body><div>hello word!</div><div>hello word!</div><p>hello word!</p><span>hello word!</span><div><ul><li class="red">hello word!</li><li>hello word!</li></ul></div><div><ul><li>hello word!</li><li>hello word!</li></ul></div></body></html>
css 选择器（标签选择器 类选择器 层级选择器 id选择器 组选择器 伪类选择器 通配符选择器）
