CSS之选择器

1 属性选择器

E[attr] {... } /* 匹配具有某个属性的元素 */
E[attr="value"] { ... } /* 匹配具有某个属性且其值为特定value的元素 */
E[attr~="value"] { ... } /* 匹配具有某个属性且其值包含value值的元素 */
E[attr|="value"] { ... } /* 语言属性选择器 */

E[attr^="value"] { ... } /* 匹配具有某个属性且其值以value值开始 */

E[attr$="value"} { ... } /* 匹配具有某个属性且其值以value值结束 */

E[attr*="value"] { ... } /* 匹配具有某个属性且其值中包含value值的元素 */

2 兄弟选择器

E + F { ... } /* 匹配紧邻兄弟元素 */

E ~ F { ... } /* 匹配后续兄弟元素 */

3 伪类选择器

3.1 结构伪类

E:first-child { ... }

E:nth-*(n) { ... }
E:nth-*(2n) { ... }
E:nth-*(3n) { ... }

E:nth-*(n+1) { ... }
E:nth-*(2n+1) { ... }
E:nth-*(3n-1) { ... }

E:nth-*(even) { ... }
E:nth-*(odd) { ... }

E:nth-child(n) { ... }
E:nth-of-type(n) { ... }

E:nth-last-child()
E:nth-last-of-type()

:first-of-type
:last-child
:last-of-type

:only-child
:only-of-type

3.2 其他伪类

:target

:empty

:root

:not()
E:not(F) { ... }
div > :not(p) { ... }

:checked { ... }
:disabled { ... }
:enabled { .... }

:required { ... }
:optional { ... }

:valid { ... }
:invalid { ... }

:in-range { ... }
:out-of-range { ... }

4 伪元素选择器

::first-line { ... }
::first-letter { ... }
::after { ... }
::before { ... }

::selection { ... }