选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。
要使用css我们首先要在html页面上引用，例如：
然后再在css文件里进行接下来的操作。
在html里可以进行行内样式和内部样式的修改，例如
行内样式修改：
内部样式修改：
而css属于外部样式修改，其中的优先级关系为：行内样式 > 外部样式 = 内部样式
———————————————————————————————————————————
css使用的基本原理可以理解为：
比如：
———————————————————————————————————————————
接下来列举一些css的选择器：
一.基本选择器
1.元素选择器 ：用元素名称做选择
特例：选择所有元素用 *
举例子：
对全页面设置颜色
对页面下div元素设置颜色
2.属性选择器：
div[id] 有id属性的div元素
div[id=xx] 有id属性,且id属性值为xx的div元素
div[id*=xx] 有id属性,且id属性值为包含xx的div元素
div[id^=xx] 有id属性,且id属性值为以xx开头的div元素
div[id$=xx] 有id属性,且id属性值为以xx结尾的div元素
举例子：
对div下有id属性,且id属性值为以xx结尾的div元素设置颜色
3.id选择器 ：运用 # 符号
举例子：
选取id为xx的元素设置颜色
4.class选择器：运用 . 符号
举例子：
选取class值为xx的元素设置颜色
特例:结合选择器:
举例子：
对class值为xx的p元素设置颜色
**5.包含选择器: **selector1 selector2 强调包含
举例子：
对div下面的所有p标签设置颜色
6.子选择器： selector1>selector2 强调父子
举例子：
对div下面的子元素p标签设置颜色
7.兄弟选择器 ：selector1~selector2
只找弟弟：
举例子：
对class值为cc下面所有class值为aa的标签设置颜色
所有弟弟：
举例子：
对class值为cc下面所有标签设置颜色
8.选择器结合： selector1,selector2,selector3,...
举例子：
对p元素、div下包含的a元素、span元素设置颜色
** 二.伪元素选择器**
**1.首字母： **::first-letter 只能用于块级元素
举例子：
对div元素的首字母设置颜色
2.首行： ::first-line 只能用于块级元素
举例子：
对div元素的首行设置颜色
**3.在前面插入： ** ::before
举例子：
在div元素前面插入aaa的文字并设置插入文字的颜色字体大小
4.在后面插入： ::after
举例子：
在div元素后面插入aaa的文字并设置插入文字的颜色字体大小
三.伪类选择器
1.结构性伪类选择器：
:nth-child() ：
括号里可以是数字n
可以是英文单词，odd代表奇数，even代表偶数
括号里可以是表达式，比如5n+2
找第一个用 :nth-child(1) 或者 :first-child
找最后一个用 :last-child 或者 :nth-last-child(1)
倒着数用 :nth-last-child()
只认数字，如果类型刚好符合，则被选中
:nth-of-type() ：
括号里可以是数字n
可以是英文单词，odd代表奇数，even代表偶数
括号里可以是表达式，比如5n+2
找第一个用 :first-of-type 或者 :nth-of-type(1)
找最后一个用 :last-of-type 或者 :nth-last-of-type(1)
倒着数用 :nth-last-of-type()
既认数字也认类型，找同类型下的第n个元素
举例子：
寻找第一个div元素设置颜色
2.ui状态伪类选择器：
:hover 鼠标悬停状态
:focus 焦点状态
:checked 选中状态
举例子：
将ul下的li元素设置为鼠标悬停状态并设置鼠标停止选中后的颜色
3.其他伪类选择器：
not() ：
举例子：
排除ul下class值为java和class值为php的li元素设置颜色
其他选择器的优先级规则
1.选择器写的越长（越精准），优先级越高
2.优先级高低 id选择器 > class选择器 > 元素选择器
3.同级别长度下，css代码按照顺序执行，后边的效果会把前边的覆盖掉
4.终极规则：以上规则适用大部分场景，特殊场景不适自行测试
版权归原作者 isolusion 所有， 如有侵权，请联系我们删除。