06前端css3增加选择器

vavid 2020-06-28

跑 ...

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

相关推荐