css 选择器
分类
- 通配选择器 - *
* {}
- 类型(元素)选择器 - Type
div {}
- 类 - Class
.container {}
- 唯一标识 - ID
#form1 {}
- 属性 - Attribute
*[key] {} /* 包含 key 属性 */
*[key="value"] {} /* 包含 key 属性且值等于 value */
*[key~="value"] {} /* 包含 key 属性,值为以空格作为分隔符的字符串列表,其中一个字符串等于 key */
*[key|="value"] {} /* 包含 key 属性且值等于 value ,或者值以 value- 开头 */
*[key^="value"] {} /* 包含 key 属性且值以 value 开头 */
*[key$="value"] {} /* 包含 key 属性且值以 value 结尾 */
*[key*="value"] {} /* 包含 key 属性且值至少包含一个 value */
*[key="value" i] {} /* 添加 i 或者 I 忽略匹配属性值的大小写 */
- 伪类 - Pseudo-class
.ex:active {} /* */
.ex:any {} /* */
.ex:checked {} /* */
.ex:default {} /* */
.ex:dir() {} /* */
.ex:disabled {} /* */
.ex:empty {} /* */
.ex:enabled {} /* */
.ex:first {} /* */
.ex:first-child {} /* */
.ex:first-of-type {} /* */
.ex:fullscreen {} /* */
.ex:focus {} /* */
.ex:hover {} /* */
.ex:indeterminate {} /* */
.ex:in-range {} /* */
.ex:invalid {} /* */
.ex:lang() {} /* */
.ex:last-child {} /* */
.ex:last-of-type {} /* */
.ex:left {} /* */
.ex:link {} /* */
.ex:not() {} /* */
.ex:nth-child() {} /* */
.ex:nth-last-child() {} /* */
.ex:nth-last-of-type() {} /* */
.ex:nth-of-type() {} /* */
.ex:only-child {} /* */
.ex:only-of-type {} /* */
.ex:optional {} /* */
.ex:out-of-range {} /* */
.ex:read-only {} /* */
.ex:read-write {} /* */
.ex:required {} /* */
.ex:right {} /* */
.ex:root {} /* */
.ex:scope {} /* */
.ex:target {} /* */
.ex:valid {} /* */
.ex:visited {} /* */
- 伪元素 - Pseudo-element
::after (:after) /* */
::-ms-fill /* */
::-ms-fill-lower /* */
::-ms-fill-upper /* */
::-ms-thumb /* */
::-ms-track /* */
::-moz-progress-bar /* */
::-moz-range-progress /* */
::-moz-range-thumb /* */
::-moz-range-track /* */
::-webkit-progress-bar /* */
::-webkit-progress-value /* */
::-webkit-slider-runnable-track /* */
::-webkit-slider-thumb /* */
::before (:before) /* */
::first-letter (:first-letter) /* */
::first-line (:first-line) /* */
::selection /* */
::backdrop /* */
- 后代选择器 - Descendant
div div {}
- 子元素选择器 - Child
div > div {}
- 相邻兄弟元素选择器 - Adjacent-sibling
div + div {}