伪类和伪元素
单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。 根本区别在于是否创造了新的元素。
伪类
:link
“链接”:超链接点击之前;:visited
“访问过的”:链接被访问过之后;:hover
“悬停”:鼠标放到标签上的时候;:active
“激活”: 鼠标点击标签,但是不松手时;
:focus
是某个标签获得焦点时的样式(比如某个输入框获得焦点);
:first-child
选择某个元素的第一个子元素;:last-child
选择某个元素的最后一个子元素;:nth-child()
选择某个元素的一个或多个特定的子元素;:nth-last-child()
选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;:nth-of-type()
选择指定的元素;:nth-last-of-type()
选择指定的元素,从元素的最后一个开始计算;:first-of-type
选择一个上级元素下的第一个同类子元素;:last-of-type
选择一个上级元素的最后一个同类子元素;:only-child
选择的元素是它的父元素的唯一一个子元素;:only-of-type
选择一个元素是它的上级元素的唯一一个相同类型的子元素;:empty
选择的元素里面没有任何内容;:checked
匹配被选中的input元素,这个input元素包括radio和checkbox;:default
匹配默认选中的元素,例如:提交按钮总是表单的默认按钮;:disabled
匹配禁用的表单元素;:enabled
匹配没有设置disabled属性的表单元素;:valid
匹配条件验证正确的表单元素;
伪元素
::first-letter
选择元素文本的第一个字(母);::first-line
选择元素文本的第一行;::before
在元素内容的最前面添加新内容;::after
在元素内容的最后面添加新内容;::selection
匹配用户被用户选中或者处于高亮状态的部分;::placeholder
匹配占位符的文本,只有元素设置了placeholder属性时,该伪元素才能生效;