一、伪类
css伪类用于向某些选择器添加特殊的效果。
- 锚伪类
- 表单伪类
- 结构化伪类
1、锚伪类:
- :link
- :visited
- :hover
- :active
a:link {color: #FF0000} // 未访问的链接
a:visited {color: #00FF00} // 已访问的链接
a:hover {color: #FF00FF} // 鼠标移动到链接上
a:active {color: #0000FF} // 选定的链接
2、表单伪类:
- :checked - - -选择选中的元素属性
- :disabled - - -选择失效的元素属性
- :enabled - - -选择激活的元素属性
- :focus - - -选择获得焦点的元素属性
- :required - - -选择必需的元素属性
- :invalid - - -选择无效的元素属性
- :valid - - -选择有效的元素属性
- :in-range - - -选择元素指定范围内的值
- :out-of-range - - -选择指定范围以外的值的元素属性
- :optional - - -选择没有"required"的元素属性
- :read-only - - -选择有只读属性的元素属性
- :read-write - - -选择没有只读属性的元素属性
3、结构化伪类:
- :first-child
- :last-child
- :nth-child(n)
- :nth-last-child(n)
- :only-child
- :first-of-type - - -匹配属于其父元素的首个特定类型的子元素的每个元素;
- :last-of-type - - -匹配元素的最后一个子元素;
- :nth-of-type(n) - - -:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素;
- :nth-last-type(n) - - -:nth-last-of-type与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的;
- :only-of-type - - -当元素是其父元素中唯一一个特定类型的子元素时,:only-child匹配该元素;
- :not —否定伪类,用于匹配不符合参数选择器的元素;
- :target - - -当URL带有锚
关于child与:nth-of-type的区别,请参考CSS3选择器:nth-child和:nth-of-type之间的差异
4、其他:
- :root- - -匹配文档的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素则可能是其他元素
- :lang- - -向带有指定 lang 属性的元素添加样式。
任何常规选择器可以再任何位置使用伪类。伪类语法不区分大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用,并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。
二、伪元素:
CSS 伪元素用于向某些选择器设置特殊效果。
1、伪元素内容:
- :first-letter
- :first-line
- :before
- :after
一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。使用两个冒号::
是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个:
的语法,但是CSS3中新增的伪元素必须使用两个冒号::
。
伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在与文档语言里的。
你要去做一个大人,不要回头,不要难过。
“我常常因为自己不够努力而感到羞愧难当。”