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