CSS2学习笔记04

利用伪类和伪元素，可以选择一些文档中不具体存在的结构。

这些元素无法预计是否存在或什么时候存在。例如，一个是否被点击过的链接，它们的样式可能需要不同。

伪类选择器

链接伪类

CSS2.1定义了两个只应用于超链接的伪类：

CSS2.1的链接伪类
伪类名	描述
`:link`	指示作为超链接（有一个 `href` 属性）并指向一个未访问地址的所有锚元素`<a>`
`:visited`	指示作为已访问地址超链接的所有锚

伪类可以正常参与选择器语法，用冒号代替点号，例如：

a:visited.internal {
    text-decoration: line-through;
}

这样会对所有已访问过的内部链接加上删除线。

动态伪类

CSS2.1定义了3个动态伪类，它们可以根据用户行为多次改变文档外观：

CSS2.1的动态伪类
伪类名	描述
`:focus`	指示当前拥有输入焦点的元素
`:hover`	指示光标停留在的元素
`:active`	指示被用户输入激活的元素（例如光标点下激活的超链接）

动态伪类可以应用于任何元素，最常应用于非链接元素：

<form> <!-- html -->
    <div>username</div><input type="text">
    <div>password</div><input type="password">
    <div>valid code</div><input type="text">
</form>

input:focus { /* css */
    background-color:azure;
}

CSS规范指出，在文档显示后，用户代理可以不重新绘制文档。因此，以下规则：

a:link, a:visited { font-size: 13px; }
a:hover { font-size: 20px; }

期望将光标指向的链接放大显示，但是其余文档内容可能不会重新排布以给该链接文字让出空间。

选择第一个子元素

还可以使用静态伪类 :first-child 来选择元素的第一个子元素。
注意，该规则很容易被误解。例如，以下规则：

p:first-child {
    font-weight: bold;
}

将某一个元素的第一个子元素中的所有 <p> 元素设置为粗体。

伪类的实质是选中某些具有抽象的属性的元素。因此，本例中选择器的作用范围一定是 <p> 元素。其余伪类选择器都是如此。

该选择器读作“具有是第一个子元素属性的……元素”。

选择语言

可以使用 :lang() 伪类选中具有某一种特定语言的元素。
它的语法类似函数。例如：

p:lang(fr) {
    font-family: Arial, Helvetica, sans-serif;
}

可以选中所有的法语元素。

该伪类的作用方式类似于 |= 属性选择器。

在HTML中，语言由 lang 属性和 <meta> 元素的组合来确定。还可能包含协议提供的信息，如HTTP首部的 xml:lang 属性。还有其余特定方法都可以确定语言。

多个伪类之间可以结合。由于伪类是以冒号“ : ”开头，因此结合多个伪类的方式就是将一个伪类的冒号接在另一个伪类之后。这与类选择器非常类似。

伪元素选择器

类似伪类选择器作用于实际上不存在的类，伪元素选择器作用于抽象的元素。

设置首字母和首元素的样式

伪元素 :first-letter 用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式。例如：

h2:first-letter {
    font-size: 200%;
}

会把每个二级标题的第一个字母的大小设置为其它字母的两倍。

伪元素 :first-line 用于影响元素中的第一个文本行。

用伪元素设置第一行元素的特点在于，如果改变窗口大小使其余文本自动换行，永远只有视觉上的第一行的所有元素有效。

设置之前和之后元素的性质

伪元素 :before 和 :after 可以用于插入生成的内容，并设置其样式。:before 可以在元素之前插入内容，:after 可以在元素之后插入内容。
以下给出了一个这样的示例：

p:before { 
    content: '-->';
    color: magenta;
}

一个显示效果

所生成的内容是一个单独的主体。更多内容之后会介绍。

伪类和伪元素

文章目录

系列文章