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