CSS选择器

1.基本选择器

1.1 通配选择器 *{}

1.2 类型选择器 div{}

1.3 类选择器 .one{}

1.4 ID选择器 #one{}

1.5 属性选择器 input[name]

注意：这个选择器既可单独使用，也可组合使用，但只能与类型选择器组合使用

2.关系选择器

2.1 后代选择器

选择器之间用空格分隔，可无限隔代

.one li {}

2.2 子选择器

选择器之间用 > 分隔，只能用于下一个层级的子元素

.one > ul {}

2.3 相邻选择器

选择器之间用 + 分隔，相邻选择器中元素之间的位置必须紧挨着，第二个元素在第一个元素之后。

<div class=".bfc"></div>
<div>与BFC是相邻选择器</div>
<div>与BFC是兄弟选择器</div>

.bfc + div {}

2.4 兄弟选择器

选择器之间用 ~ 分隔，没有相邻选择器的那种限制.

.bfc ~ div {}

3.伪选择器

伪选择器以 : 或 :: 开头，若要与其他选择器组合使用，只能用类型选择器。

3.1 伪类选择器

常用的有链接伪类、位置伪类、表单伪类。
(1) 链接元素中，有4个常用状态，未访问(:link)、已访问(:visited)、激活(:active)、悬停(:hover)
(2) 元素的位置可为第一个(:first-child)、最后一个(:last-child)、第n个(:nth-child)
(3)表单中，有选中(:checked)、启用(:enabled)、禁用(:disabled)

伪类可出现在元素的任何位置，也可同时定义多个伪类。

3.2 伪元素选择器

(1) 过滤内容选择器有::first-letter(首字符), ::first-line(首行), ::placeholder(占位符), ::selection(选中内容)
(2) 添加内容的选择器有::before, ::after

伪元素只能出现在选择器的最后面，并且不能同时定义多个伪元素。

4.选择器分组

用逗号(,)隔开