CSS选择器

1、普通选择器

1. id选择器（#box），选择id为box的元素
2. 类选择器（.one），选择类名为one的所有元素
3. 标签选择器（div），选择标签为div的所有元素
4. 后代选择器（#box div），选择id为box元素内部所有的div元素 (选择左右后代元素)
5. 子选择器（.one>.one_1），选择父元素为.one的所有.one_1的元素 （只选择儿子元素）
6. 相邻同胞选择器（.one+.two），选择紧接在.one之后的.two元素
7. 群组选择器（div,p），选择div、p的所有元素
8. 交集选择器（div.red）,选择既是div标签，class又是red的元素注意点：
   ①、交集选择器中的选择器之间是紧挨着的，没有东西分隔；
   ②、交集选择器中如果有标签选择器，标签选择器必须写在最前面

2、动态伪类

a:link ：选择未被访问的链接
a:visited：选取已被访问的链接
a:hover ：鼠标指针浮动在上面的元素
a:active： 激活的链接（鼠标在链接上长按住未松开）

◼ 使用注意
p :hover必须放在:link和:visited后面才能完全生效
p :active必须放在:hover后面才能完全生效
p 所以建议的编写顺序是 :link、:visited、:hover、:active

◼ 除了a元素，:hover、:active也能用在其他元素上
◼ :focus指当前拥有输入焦点的元素（能接收键盘输入）
p 文本输入框一聚焦后，背景就会变红色
◼ 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
◼ 动态伪类编写顺序建议为
p :link、:visited、:focus、:hover、:active

◼ 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

3、 伪元素选择器

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

在某个我是div元素的前面和后面分别插入两个span元素，第一个方法就是直接在div元素前后插入两个div元素。但是如果要在很多元素前后都插入这两个span元素的化，就很麻烦。需要copy很多。这个时候就可以用：before和：after的content。给要加的元素都加一个统一的类名，然后类名：before; 如果content位置不好看，可以通过relative定位微调。

After和before实际上都是行内元素。所以如果你要显示8*8的红色方块，你就得设置display为inline-block，然后才可以设置width和height。设置为block就会在div后面一行

4、 伪类选择器

常用一下6个
1.：nth-child()
◼ :nth-child(1)
p 是父元素中的第1个子元素
◼ :nth-child(2n)
p n代表任意正整数和0 p 是父元素中的第偶数个子元素（第2、4、6、8......个）
p 跟:nth-child(even)同义
◼ :nth-child(2n + 1)
p n代表任意正整数和0 p 是父元素中的第奇数个子元素（第1、3、5、7......个）
p 跟:nth-child(odd)同义
◼ nth-child(-n + 2)
p 代表前2个子元素

如果第二个元素是span元素

那么就没有元素会被选择上

2.：nth-last-child()
◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
p :nth-last-child(1)，代表倒数第一个子元素
p :nth-last-child(-n + 2)，代表最后2个子元素

3:nth-of-type()
◼ :nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
p :nth-last-child(1)，代表倒数第一个子元素
p :nth-last-child(-n + 2)，代表最后2个子元素

4.:nth-last-of-type()
◼ :nth-last-of-type()用法跟:nth-of-type()类似
p 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

5    :root，根元素，就是HTML元素

6   :empty代表里面完全空白的元素