伪类和伪元素:
根本区别在于它们是否创造了新的元素
(抽象)
1.伪类
:用于向某些选择器添加特殊的效果(没有创建新元素
)
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {
color: #FF0000} /* 未访问的链接 */
a:visited {
color: #00FF00} /* 已访问的链接 */
a:hover {
color: #FF00FF} /* 鼠标移动到链接上 */
a:active {
color: #0000FF} /* 选定的链接 */
2.伪元素
:创建了 html 中不存在的元素
,用于将特殊的效果添加到某些选择器
::before {
} /* 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
::after {
} /* 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */