06前端css3增加选择器
跑 ...
css3新增选择器
基本选择器选择器
-
子元素选择器
[父元素 > 子元素] 选择父元素下子元素
-
相邻兄弟选择器
[子元素1 + 子元素2] 匹配子元素1紧跟在后面的子元素2,他们必须有一个相同的父元素
-
通用兄弟选择器
[子元素1 ~ 子元素2] 匹配子元素1后面的所有元素2的所有元素,他们必须有一个相同的父元素
-
群组选择器
[元素1, 元素] 具有相同样式的元素分组在一起,用逗号隔开
属性选择器
-
对带有指定属性的html元素设置样式
-
element[attribute] 匹配所有attribute属性的元素,设置样式
-
element[attribute='value'’] 匹配所有attribute属性值为value的元素,设置样式
-
element[attribute~='value'’] 匹配所有attribute属性值为包含单词value的元素,设置样式
-
element[attribute^='value'’] 匹配所有attribute属性值为以value开头的元素,设置样式
-
element[attribute$='value'’] 匹配所有attribute属性值为以value结尾的元素,设置样式
-
element[attribute
*
='value'’] 匹配所有attribute属性值为包含value的元素,设置样式 -
element[attribute|='value'’] 匹配所有attribute属性值为value-开头的元素,设置样式
伪类选择器
动态伪类
-
:active
-
:link
-
:focus
-
:visited
-
:hover
状态伪类
-
:checked
-
:enabled
-
:disabled
结构类
-
:first-child 匹配属于其父元素的第一个子元素的每一个element元素
-
:last-child 匹配属于其父元素的最后一个子元素的每一个element元素
-
:only-child 匹配属于其父元素只有一个子元素的每一个element元素
-
:nth-child(N/n) 匹配属于其父元素的N个子元素,不论元素的类型
-
:nth-last-child(N/n) 匹配属于其父元素的N个子元素,不论元素的类型,从最后一个子元素开始计数
-
:fist-of-type匹配属于其父元素的第一个能匹配上type类型的子元素的每一个element元素
-
:last-of-type匹配属于其父元素的最后一个能匹配上type类型的子元素的每一个element元素
-
:nth-of-type(n)匹配属于其父元素能匹配上type类型开始的第n个子元素的每一个element元素
-
:nth-last-of-type(n)匹配属于其父元素能匹配上type类型开始的第n个子元素的每一个element元素,从最后一个子元素开始计数
-
:only-of-type匹配属于其父元素只有一个符合type类型的子元素的每一个element元素
-
:empty匹配属于其父元素没有一个符合type类型的子元素的每一个element元素
否定选择器
-
:not 匹配非指定元素的每一个元素
伪元素
-
::first-line对元素的第一行文本进行格式化,只能用在块元素
-
::first-letter对元素的第一个字母进行格式化,只能用在块元素
-
::before 在指定元素前插入内容
-
::after 在指定元素后插入内容,一般用after清除浮动
-
::selection 用于设置在浏览器中选中的文本后的背景色和前景色
css权重
-
行内样式1000
-
id选择器100
-
类选择器10
-
属性选择器、伪类选择器10
-
元素、伪元素1
-
通配符
*
0