CSS选择器

作用：根据指定的选择器模式匹配文档中的元素，并为其设置样式。
选择模式：选择符，指匹配元素的依据

1.标签选择器/元素选择器

　　根据标签名，匹配文档中所有的该元素，为其设置样式
　　语法：标签名{属性：值；}

2.类选择器

　　1.根据元素的class属性值进行匹配
　　　　语法：以英文.开头，后面跟上class属性值
???　　　　　　.c1{属性：值；}
???　　　　　　<p class="c1"></p>
　　　　注意：
???　　　　　　1.写选择器时，不要随便出现任何符号
???　　　　　　2.类名自定义，禁止以数字开头，可以出现 - 数字 字母，尽量见名知意

　　2.类选择器的结合使用：
???　　　　1. ?标签名.类名{}----》 p.c1{} ??
????????　　　　　　表示在指定标签中匹配class属性值对应的元素
???????　　　　　　注意：标签名一定要写在前面
???　　　　2. ?.类名1.类名2{}
???　　　　3.标签中使用两个类选择器或者多个的样式，之间使用空格隔开。
???????　　　　　　<p class="类名1 类名2">

3.ID选择器

　　作用：HTML中所有的元素都有一个id属性，主要用来表示该元素在文档中的标志，具有唯一性。

　　语法：#id属性值{}
　　使用：
???　　　　通常页面中具有唯一性的元素，都可以使用id进行标识，并使用id选择器添加样式
???　　　　页面中具有唯一性的元素：外围结构标签，搜索框

　　注意：
??　　　　1.id属性具有唯一性，不能重复使用相同id，在使用JS获取页面元素时，ID是元素唯一的标识，如果出现重复，后面的元素都获取不到。
???　　　　2.id选择器与class选择器的区别：
???????　　　　　　id具有唯一性，id选择器定义的样式不能被复用：
???????　　　　　　class可以重复使用，类选择器定义的样式可以复用
???　　　　3.具有唯一性的元素都可以使用ID选择器设置样式
???????　　　　　　外部的结构标签使用id标识，内部的标签使用class标识

4.群组选择器

　　作用：为多个选择器设置共同的样式

　　语法：选择器1,选择器2,选择器3{样式}

5.后代选择器

　　作用：依托元素的层级关系匹配后代元素，后代元素包含直接子元素和间接子元素

　　语法：选择器1 选择器2{}
???????　　　　在选择器1对应的元素中匹配后代元素，后代元素需满足选择器2
6.子代选择器

　　作用：依托元素的层级关系，匹配直接子元素

　　语法：选择器1>选择器2 {}
???　　　　在选择器1对应的元素中匹配直接子元素，满足选择器2的要求
7.伪类选择器

　　1.超链接伪类选择器
???????????　　　　主要针对超链接的不同状态设置样式
???????????　　　　：link 超链接访问前的状态
???????????　　　　：visited 超链接访问后的状态
?????????　　2.动态伪类选择器
????????????　　　　：hover ?表示鼠标悬停时的状态
????????????　　　　：active ?表示鼠标点按是的状态
????????????　　　　：focus ?表示获取焦点时的状态，常见于输入框，接受用户输入时，就表示获取到焦点。

　使用：
　　1.伪类选择器必须与其他选择器结合使用，伪类选择器是给元素不同的状态设置样式
　　2.设置超链接四种状态下的样式
???　　　　a:link{}
???　　　　a:visited{}
???　　　　a:hover{}
???　　　　a:active{}
???　　　　书法顺序：LoVe/HAte ?爱恨原则
　　3.表单元素获取焦点（针对输入框）
???　　　　input：focus{}

CSS选择器

原文地址：https://www.cnblogs.com/zengsf/p/9769800.html