一、标签选择器：根据指定的规则，找到所有此指定的标签设置属性
格式： 标签名称 { 属性:值; 属性:值; }
p { 属性:值; }
/* CSS标签选择器 */
h2 { text-align: center; color: red; }
p { color: blue; text-align: center;}

注意：标签选择器不能单独设置一个标签，而只能设置一类标签

二、id选择器：根据指定的id名称，找到对应id的标签，设置其属性
格式：

id名称 { 属性:值; }

/* CSS id选择器 */
#idwo {color: orange;}
#idyue {color: yellow;}
#idyou {color: green;}
#idzai {color: blue;}
注意：
任何一个HTML标签都有一个id属性，都可以设置id(类似身份证)
在同一界面中，不要重复id名称，会发生未知错误
id名称规范：只能由字母、数字、下划线，且不能以数字开头
id名称不能是HTML标签名称
在开发中，id属性不用于CSS样式，id基本用于js

三、类选择器：类似id选择器，根据指定的类名称，找到对应标签，设置属性
/* 类选择器 */
.classLian {text-decoration: overline;}
.classPao {text-decoration: line-through;}
.classYi {text-decoration: underline;}
.classZhen {text-decoration: initial;}

注意：
任何一个HTML标签都有一个class属性，都可以设置class
在同一界面中，class属性可以重复
class名称规范：只能由字母、数字、下划线，且不能以数字开头
class名称不能是HTML标签名称
类名专门用来给一个标签设定CSS样式的

HTML标签中，一个标签可以绑定多个类名(类似人的小名)
<p class="类名1 类名2 类名3">XXX</p>

Paste_Image.png

id选择器和class选择器的对比：
① id选择器不能重复，class选择器可以重复
② 一个HTML标签只能绑定一个id选择器，一个HTML标签可以绑定多个class选择器
③ id选择器以#开头，class选择器以 . 开头
④ 企业开发中，id仅用于js，不用于CSS样式

Paste_Image.png

四、后代选择器：找到指定标签的所有特定的后代标签，设置属性。类似人的下代，继承的关系。
格式：
标签名称1 标签名称2 { 属性:值; }

先找到标签名称1的标签，然后在这个标签下面去查找所有叫 标签名称2 的标签，然后设置属性

Paste_Image.png Paste_Image.png

五、子元素选择器：找到指定标签中的有的特定的直接子元素，设置属性(下一代，不是下几代，儿子)
格式：
标签1>标签2 { 属性:值; }
标签1>标签2>标签3>标签4 { 属性:值; }

Paste_Image.png

六、交集选择器：给所有选择器选中的标签中，相交的那部分设置属性
格式：
选择器1选择器2 {属性:值; 属性:值; }
p.class#id {pro:val;}

注意：
选择器：标签、#id 、 .class
选择器1和选择器2必须挨着，但是是 #id 和 .class

Paste_Image.png

七、并集选择器：给所有选择器选中的标签设置属性
格式：
选择器1,选择器2 {属性:值; 属性:值;}

Paste_Image.png

八、兄弟选择器：同级关系
相邻兄弟选择器CSS2
-给指定选择器后面紧跟的那一个选择器的标签设置属性
格式：
选择器1+选择器2 {属性:值;}

Paste_Image.png

通用兄弟选择器CSS3
-给指定的选择器后面所有的选择器中的选中标签设置属性
格式：
选择器1~选择器2 {属性:值;}

Paste_Image.png

九、序选择器10个：CSS3中新增的最具有代表性质的选择器
-设置同级标签的第几个的属性
p:first-child 选中同级的第一个标签设置属性，不区分类型

-设置同级中同类型的第几个标签的属性
p:first-of-type 选中同级且同类型中的第一个标签设置属性，不区分类型
p:last-of-type 选中同级且同类型中的最后一个标签设置属性，不区分类型
p:nth-child(n) 选中同级且同类型中的第n个标签设置属性，不区分类型
...........

Paste_Image.png

序选择器 下：
even：选中页面中为偶数行的标签设置属性
odd : 选中页面中为奇数行的标签设置属性

--同级别
p:nth-child(odd) {pro:val; pro:val;}
p:nth-child(even) {pro:val; pro:val;}

--同类型
p:nth-of-type(odd) {pro:val; pro:val;}
p:nth-of-type(even) {pro:val; pro:val;}

序选择器很重要，常见的应用场景：

Paste_Image.png

十、属性选择器(7个)：根据指定的属性名称，找到对应的标签然后设置属性
第1个 [attribute]
p[class] {color: lightgreen;} /* 属性选择器【attribute】 */

Paste_Image.png

第2个：[attribute=value] 最常见应用于 input 属性
类似这样 input[type=password] {pro:val;}
p[class="类名"] {pro:val; pro:val;}

其余5个属性选择器分为3类

• 以某指定值开头的属性取值
  [attribute|=value] CSS2
  [attribute^=value] CSS3
  格式：
  img[alt^=abc] {pro:val;}

• 以某个指定值结尾的属性取值
  [attribute$=value] CSS3
  格式：
  img[alt$=xxx] {pro:val;}

• 包含了某个指定值的属性取值
  [attribute~=value] CSS2
  [attribute=value] CSS3
  格式：
  img[alt=def] {pro:val;}

<img src="" alt="abc_xxx" />
<img src="" alt="def_xxx" />
<img src="" alt="abc_def" />
<img src="" alt="xxx_def" />
<img src="" alt="xxx_abc" />
<img src="" alt="def_abc" />

Paste_Image.png

十一、通配符选择器：给当前界面所有标签设置属性，设置前会遍历界面所有标签，性能会比较差
格式：

• {pro:val;}