这是我参与「第五届青训营 」笔记创作活动的第2天
什么是CSS选择器
CSS选择器能够按照一定的规则选出符合条件的元素，为之添加CSS样式
选择器的种类繁多，大概归为以下几类：
- 通用选择器（universal selector）
- 元素选择器（type selectors）
- 类选择器（class selectors）
- id选择器（id selectors）
- 属性选择器（attribute selectors）
- 组合（combinators）
- 伪类（pseudo-classes）
- 伪元素（pseudo-elements）
通用选择器
通用选择器（universal selector）会选中所有的元素，一般用来给所有元素作一些通用性的设置，或是重置一些内容，但效率比较低，尽量不要使用。
* { }
简单选择器
简单选择器是开发中用的最多的选择器
- 元素选择器（type selectors）, 使用元素的名称
- 类选择器（class selectors）, 使用
.类名 - id选择器（id selectors）, 使用
#id
⚠注意事项
- 一个HTML文档里面的id值是唯一的，不能重复
- 命名如果由多个单词组成，单词之间可以用中划线
-、下划线_连接，也可以使用驼峰标识
属性选择器
拥有某一个属性 [att]，属性等于某个值 [att=val]
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割
后代选择器
后代选择器一: 所有的后代(直接/间接的后代),选择器之间以
空格分割
后代选择器二: 直接子代选择器(必须是直接子代),选择器之间以
>分割;
兄弟选择器
兄弟选择器一: 相邻兄弟选择器
+,使用符号+连接
兄弟选择器二: 普遍兄弟选择器~,使用符号~连接
选择器组
交集选择器: 需要同时符合两个选择器条件,在开发中用于精准地选择某一个元素
并集选择器: 符合一个选择器条件即可(两个选择器以
,号分割)，在开发中用于给多个元素设置相同的样式
伪类
常见的伪类：
-
动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus -
目标伪类（target pseudo-classes）
:target -
语言伪类（language pseudo-classes）
:lang( ) -
元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked -
结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( ) :first-child、:last-child、:first-of-type、:last-of-type :root、:only-child、:only-of-type、:empty -
否定伪类（negation pseudo-classes）
:not()
动态伪类：
示例：
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
伪元素
常用的伪元素：
:first-line、::first-line :first-letter、::first-letter :before、::before :after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号
::before和::after可以用来在一个元素的内容之前或之后插入其他内容（文字、图片都行)，常通过 content 属性来为一个元素添加修饰性的内容。
