CSS选择器总结-待整理

仅做备份,尚未整理

1、标签/元素 选择器

关系
div p span … 
div{}

权重1


ID 选择器
类/类别 选择器

.calssname 权重10

4, 通配符/通用 选择器

*{ } 权重 :0


5.伪类选择器
:link :hover 权重 :10

6,伪元素选择器

::before ::alert :first-letter{}

权重 :1


7,属性选择器
[title]{}

权重 :10

8,父子/后代/派生/关联 选择器
div h1 span{}

9,子集/直接子元素 选择器
div>h1{}

10,结构性伪类选择器
.box.ft:first-of-type{}

11,交集选择器(中间没有空格)
#idneme.classname{}

12、并集选择器(中间用逗号隔开)
#idneme,.classname{}


12,相邻兄弟选择器
div + p{}

12,所有兄弟选择器
div ~ p{}


13,群组/分组 选择器
div,h1,p,ul{}


14,UI元素状态选择器
一般用于表单元素
:disabled 元素不可用无法选择
:read-only
:checked
:read-write
:selection
 

 

组合选择器

并集选择器

交集选择器

后代选择器

子元素选择器

毗邻选择器

弟弟选择器

属性选择器

分组选择器

伪类选择器

伪元素选择器

选择器的优先级

你可能感兴趣的:(前端)