css3 新增选择器有哪些?

2025-05-09 07:00:37
推荐回答(1个)
回答1:

一、css3之前的选择器

  • ID选择器,#

  • 类选择器,.

  • 包含选择器(E F)

  • 伪类选择器(:link,visited,hover,active,focus,first-child)

  • 伪元素选择器(::first-line,first-letter,before,after)

  • 通配选择器(.)

  • 属性选择器(foo[name='martin'])

  • 子包含选择器(E>F)

  • 相邻兄弟选择器(E+F)

  • 二、css3新增选择器

    新增属性选择器:

  • E[foo^='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以bar开头

  • E[foo$='bar'] 匹配E元素,该元素包含foo属性,且foo属性值以bar结尾

  • E[foo*='bar'] 匹配E元素,该元素包含foo属性,且foo属性值包含bar字符串

  • 新增结构伪类选择器:

  • E:root 匹配文档所在的根元素

  • E:nth-child(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素也参与排序,若第n个子元素不是E元素,则该语句没有效果(注意这里的n从1开始)

  • E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素

  • E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素,非E的子元素不参与排序(n同样是从1开始)注意区别nth-child(n)

  • E:last-child

  • E:first-of-type

  • E:last-of-type

  • E:only-child

  • E:only-of-type

  • E:empty

另外,使用前要考虑浏览器版本,新增css3选择器存在兼容性问题。平时多多练习,多动手。