CSS【选择器】学习笔记

0. 选择器优先级

选择器优先级由高到低顺序如下：

!important 最高

内联样式 +1000

id选择器 +100

类选择器=伪类选择器=属性选择器 +10

标签选择器=伪元素选择器 +1

* 通配符选择器 +0

如果选择器的优先级相同，CSS代码中靠后的CSS规则优先级高于靠前的规则。

直接样式 > 祖先样式，最近的祖先样式 > 其他祖先样式 。

E#id > #id 、E.class > .class

.not伪类不参与权重计算，但是会计算它小括号中选择器的权重。

1. 简单选择器

E F

匹配所有被E包含的F元素集合。

E>F

匹配E元素的所有一级子元素F。

E+F

匹配紧跟在E元素之后的F元素。

E~F

匹配E元素后面的所有F兄弟元素，同级同类。

扫描二维码关注公众号，回复： 10217715 查看本文章

E,F

同时为多个选择器设置相同的CSS样式规则。

2. 结构伪类选择器

E：not(s)

从E匹配的元素集合中删除s选择器参数所匹配的元素。
若s有子元素，不会对其子元素产生影响。

E：root

匹配文档中E的根元素，E一般为html。

E：lang(s)

使用s语言时的E元素的样式。

E：empty( )

匹配内容为空的E类型元素。

E：target

匹配被激活的目标元素，点击锚点链接时，目标元素被激活。

E：first-child、E：last-child、E：only-child

匹配类型为E的父元素、下的第一个/最后一个/唯一一个子元素（E为css选择器）。
注意，不是E的第一个子元素，而是父元素下的第一个E类型。

E：nth-child(n)、E：nth-last-child(n)

匹配为E类型的父元素、的第n个子元素、倒数第n个子元素。

E：first-of-type、E：last-of-type、E：only-of-type

匹配父元素下E类型子元素集合中，处于同标签类型第一位/最后一位/唯一的元素。
注意，匹配E类型，且元素必须处于同标签类型元素集合的第一位。

E：nth-of-type(n)、E：nth-last-of-type(n)

匹配E类型元素且位于父元素下同类型标签兄弟元素的第n位、倒数第n位。

E：optional、E：required

匹配非必需（不具有required属性）表单元素与必需（具有required属性）表单元素。

E：out-of-range

匹配值不在指定区间的表单元素。
表单元素可以通过min或者max设置最大值和最小值。
如果值不在min与max指定的区间之内，那么此表单元素可以被选择器匹配。

E：read-only、E：read-write

匹配只读（具有readonly属性）表单元素与可读写表单元素。

E：valid

匹配HTML5表单验证通过的元素。

3. 动态伪类选择器

E：link、E：visited

匹配未访问过的与已访问的链接< a>。（a:link{…}、a:visited{…}）

E:hover、E:active、E:focus

鼠标经过（悬停）、鼠标按下但未松开、鼠标获得焦点（点击后松开）

E：focus-within

匹配鼠标获得焦点的元素与其父辈元素。

4. UI元素状态伪类选择器

E:enable、E:disable

匹配处于可用、不可用状态的元素。

E:checked、E:default

checked用来制指定当表单中的radio单选框、checkbox复选框处于选取状态时的样式。
default选择器匹配默认选中的复选框。

E:selection

用来指定当元素处于选中状态时的样式

5. 打印伪类选择器

@page:first

设置页面容器第一页使用的样式。

@page:left、@page:right

设置页面容器位于装订线左边/右边的所有页面使用的样式。

6. 伪元素选择器

E::selection

匹配被选中的文本。（div::selection{…}）

E::before、E::after

设置在对象前/后（依据对象树的逻辑结构）产生的内容。

E::first-line、E::first-letter

匹配元素内第一行/第一个字符（仅块级元素）。

content

规定插入的字符串内容，通常要和伪类选择器一起使用。
E::after{content："…";}表示在E元素后插入文字“…”。

7. 属性选择器

E[attr]

匹配具有attr属性的元素。（div[class]{…}）

E[attr=“val”]

具有attr属性且属性值等于val的元素E。

E[attr~=“val”]

具有多个attr属性且属性值包含val的元素E。

E[attr^=“val”]、E[attr $ =“val”]、E[attr*=“val”]

匹配具有attr属性且属性值以val开头的/结尾的/包含的元素E。

E[attr|=“val”]

匹配具有attr属性，且属性值是以"val"开头并用"-"分割的元素E。