css(3)常用选择器及其优先级_css3 选择器优先级排序-CSDN博客

本文链接：https://blog.csdn.net/CcA_Lin/article/details/104735413

css选择器

基本的元素、id、类选择器等就不讲了，主要总结css3选择器。

一、基本选择器

1.子元素选择器

格式：父元素 > 子元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari
注意：子元素和后代的区别，子元素选择器是选择直接后代，就是它的儿子，而不是孙子、曾孙子。

2.相邻兄弟选择器

格式：元素 + 相邻兄弟元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari
注意：兄弟即为有共同父元素的元素。相邻兄弟只选择紧挨着元素的下一个兄弟元素。

3.通用兄弟选择器

格式：元素 ~ 后面的兄弟元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari
注意：选择后面的所有兄弟元素！

4.群组选择器

格式：元素1,元素2,…,元素n
兼容性：IE6+、FireFox、Chrome、Opera、Safari
注意：即为选择器的组合，用逗号隔开！

二、属性选择器

1.Element[attribute]

选择包含某属性的元素 eg.a[href]
兼容性：IE8+、FireFox、Chrome、Opera、Safari

2.Element[attribute=“value”]

选择包含某属性且为某属性值的元素 eg.a[href="…"]
兼容性：IE8+、FireFox、Chrome、Opera、Safari

3.Element[attribute~=“value”]

选择包含某属性且其属性值包含value的元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari

<div class="aaa bbb"></div>

// div[class~="aaa"]

4.Element[attribut^=“value”]

选择包含某属性且其属性值以value开头的元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari

<div class="#1"></div>
<div class="#2"></div>

// div[class^="#"]

5.Element[attribut$=“value”]

选择包含某属性且其属性值以value结尾的元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari

6.Element[attribut*=“value”]

选择包含某属性且其属性值包含value字符串的元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari
注意：不要跟~=的包含搞混了！

<div class="aa#aa"></div>

// div[class*="#"]

7.Element[attribut|=“value”]

选择包含某属性且其属性值为value或value开头的元素
兼容性：IE8+、FireFox、Chrome、Opera、Safari

三、伪类

1.动态伪类选择器

锚点伪类选择器

:link

选择匹配的element元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上。

:visited

选择匹配的element元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上。

用户行为选择器

:active

选择匹配的element元素，且匹配元素被激活。常用于链接描点和按钮上.

hover

选择匹配的element元素，且用户鼠标停留在元素element上。IE6及以下浏览器仅支持a:hover

:focus

选择匹配的element元素，而且匹配元素获取焦点。

注意：a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover之后，才是有效的。
即：a:link 、a:visited 、a:hover 、a:active 或 a:visited 、a:link 、a:hover 、a:active

2.UI元素状态伪类

兼容性：IE9+、FireFox、Chrome、Opera、Safari

:enabled 匹配表单中激活的元素
:disabled 匹配表单中禁用的元素
:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

3.结构类（:nth选择器）

:root

匹配文档的根元素，对于HTML文档，就是HTML元素
兼容性：IE9+、FireFox、Chrome、Opera、Safari

:first-child

匹配属于其父元素的首个子元素的每个Elenment元素，等同于:nth-child(1)

上面这句话听起来有点拗口，拿div元素举例，先找到div的父元素的第一个子元素，如果这个子元素是div，则选择，如果不是则不匹配。
兼容性：IE8+、FireFox、Chrome、Opera、Safari

:last-child

匹配属于其父元素的首个子元素的每个Elenment元素，等同于:nth-last-child(1)
与:first-child相同，当其父元素的最后一个子元素为该Elenment时才选择！
兼容性：IE8+、FireFox、Chrome、Opera、Safari

:nth-child(n)

匹配属于其父元素的第n个子元素，当这个子元素为该Elenment元素时选择。
关于参数：

从1开始计数！
也可以传入n（但只能是n，不能是其他字母），且n从0开始计数。如2n，选择第2、4、6…个；但不能传入 n*n，不能传入*这个字符！
:nth-child(odd)匹配奇数项，:nth-child(even)匹配偶数项

兼容性：IE9+、FireFox4+、Chrome、Opera、Safari

:nth-last-child(n)

匹配属于其父元素的第n个子元素，当这个子元素为该Elenment元素时选择，从最后一个子元素开始计数。其他和:nth-child(n)相同。
兼容性：IE9+、FireFox4+、Chrome、Opera、Safari

:nth-of-type(n)

匹配属于其父元素的特定类型的第n个子元素的每个元素。比如div:nth-of-type(2),就是选择div的父元素的第二个div元素，而:nth-child(2)匹配的是第二个子元素，仅当这个子元素为div时才选择。
兼容性：IE9+、FireFox4+、Chrome、Opera、Safari

:nth-last-of-type(n)

匹配属于其父元素的特定类型的第n个子元素的每个元素,从最后一个开始计数。不再赘述。
兼容性：IE9+、FireFox4+、Chrome、Opera、Safari

:first-of-type

匹配属于其父元素的特定类型的首个子元素的每个元素，等同于:nth-of-type(1)
兼容性：IE9+、FireFox、Chrome、Opera、Safari

:last-of-type

匹配属于其父元素的特定类型的最后一个子元素的每个元素，等同于:nth-last-of-type(1)
兼容性：IE9+、FireFox、Chrome、Opera、Safari

:only-child

匹配父元素下仅有的一个子元素，当这个唯一子元素为该Elenment时选择。等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
兼容性：IE9+、FireFox、Chrome、Opera、Safari

:only-of-type

匹配属于其父元素的特定类型的唯一子元素的每个元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
注意：其父元素只含有一个该element元素，但它可以有其他的子元素。

兼容性：IE9+、FireFox4+、Chrome、Opera、Safari