伪类和伪元素

伪类和伪元素

区别：

• 伪类是设置指定元素在特定状态下的样式。
• 伪元素是设置指定元素特定部分的内容和样式。

伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

伪元素的语法：

selector::pseudo-element {
    property: value;
}

实例：

/* 未访问的链接 */
a:link {
    color: #FF0000;
}
/* 已访问的链接 */
a:visited {
    color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
    color: #FF00FF;
}
/* 已选择的链接 */
a:active {
    color: #0000FF;
}

伪类名称对字母大小写不敏感。

伪类选择器可以和类选择器结合使用：

a.highlight:hover {
    color: #ffdd00;
}

在

元素上使用 :hover 伪类：

div:hover {
    background-color: blue;
}

简单的工具提示悬停：

p {
    display: none;
    background-color: yellow;
    padding: 20px;
}
li:hover p {
    display: block;
}

:first-child 伪类匹配其父元素中的第一个子元素

伪元素

伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

伪元素的语法：

selector::pseudo-element {
    property: value;
}

::before 伪元素可用于在元素内容之前插入一些内容。

::after 伪元素可用于在元素内容之后插入一些内容。

h1::before {
    content: url(images/objective_bg.png);
    vertical-align: middle;
    margin-right: 12px;
}