CSS选择器

CSS选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

一、选择器的类型有哪些？

1、基本选择器：指选中某一类元素，只需要一个选择器的一类。
2、通配选择器：*。(权重0)
3、ID选择器：#id名。(权重1000)
4、类选择器：.。(权重10)(.a .b选择a类里面的b类)(.a.b选择同时具有a和b类目的)
5、元素（标签）选择器：div、p、span、i、li、ul...。(权重1)
6、属性选择器：div[attribute=value]。(权重10)
7、后代选择器：div p。(选择div里面的所有p标签)
8、子代选择器：div>p。(选择父元素是div的所有p标签)
9、相连兄弟选择器：div+p。(匹配div后面的和div同一级的第一个p标签)
10、一般兄弟选择器：div~p。(匹配div后面的和div同一级的所有p标签)
11、伪类选择器：div:(link、visited、hover、active、focus)。(权重10)
12、伪元素：div::(before、after)。(权重1)

二、一些伪类选择器的区分：

1、:first-child

// 1、p:first-child 选择属于其父元素的第一个子元素是p标签的p标签
// 2、p:first-child i 选择属于p标签里面每一个i标签，且这个p标签是其父元素的第一个子元素
// 3、p>:first-child 选择p标签里面的第一个子元素
// 4、:first-child 选择父元素里面的所有子元素

2、:last-child

// 1、p:last-child = p:nth-last-child(1) 选择属于其父元素的最后一个子元素是p标签的p标签
// 2、p:last-child i 选择属于p标签里面每一个i标签，且这个p标签是其父元素的最后一个子元素
// 3、p>:last-child 选择p标签里面的最后一个子元素
// 4、:last-child 选择父元素里面的所有子元素

3、:first-of-type

// 1、p:first-of-type = p:nth-of-type(1) 选择属于其父元素的所有p标签的第一个p标签

4、:last-of-type

// 1、p:last-of-type = p:nth-last-of-type(1) 选择属于其父元素的所有p标签的最后一个p标签

5、:nth-child(n)

// :nth-child(n) 匹配属于其父元素的第 N 个子元素，不论元素的类型。
// p:nth-child(n) 匹配属于其父元素的第 N 个子元素，该子元素是p标签才有效。
// p:nth-child(odd) 匹配属于其父元素的奇数位子元素，该子元素是p标签才有效。
// p:nth-child(even) 匹配属于其父元素的偶数位子元素，该子元素是p标签才有效。

6、:nth-last-child(n)

// :nth-last-child(n) 匹配属于其父元素的倒数第 N 个子元素，不论元素的类型。
// p:nth-last-child(n) 匹配属于其父元素的倒数第 N 个子元素，该子元素是p标签才有效。
// p:nth-last-child(odd) 匹配属于其父元素的奇数位子元素，该子元素是p标签才有效（倒着数）。
// p:nth-last-child(even) 匹配属于其父元素的偶数位子元素，该子元素是p标签才有效（倒着数）。

7、:nth-of-type(n)

// 1、p:nth-of-type(n) 匹配属于父元素的所有子代p标签中的第 N 个p标签。

8、:nth-last-of-type(n)

// 1、p:nth-last-of-type(n) 匹配属于父元素的所有子代p标签中的倒数第 N 个p标签。

9、:only-of-type

// 1、p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

10、:only-child

// p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。