伪对象选择器

课后整理 2020-12-17

伪对象选择器主要针对不确定对象定义样式,如第一行文本、第一个字符、前面内容、后面内容。这些对象具体存在,但又无法具体确定,需要使用特定类型的选择器来匹配它们。

伪对象选择器以冒号(:)作为语法标识符。冒号前可以添加选择符,限定伪对象应用的范围,冒号后为伪对象名称,冒号前后没有空格。语法格式如下:

:伪对象名称

CSS3新语法格式如下:

::伪对象名称

提示,伪对象前面包含两个冒号,主要是为了与伪类选择器进行语法区分。

【示例】下面示例使用:first-letter伪对象选择器设置段落文本第一个字符放大下沉显示,并使用:first-line伪对象选择器设置段落文本第一行字符放大带有阴影显示,则效果如图1所示。

<style type="text/css">
p{ font-size:18px; line-height:1.6em;}
p:first-letter {/* 段落文本中第一个字符样式 */
    float:left;
    font-size:60px;
    font-weight:bold;
    margin:26px 6px;
}
p:first-line {/* 段落文本中第一行字符样式 */
    color:red;
    font-size:24px;
    text-shadow:2px 2px 2px  rgba(147,251,64,1);
}
</style>
 
<p>我在朦胧中,眼前展开一片海边碧绿的沙地来,上面深蓝的天空中挂着一轮金黄的圆月。我想:希望本是无所谓有,无所谓无的。这正如地上的路;其实地上本没有路,走的人多了,也便成了路。 </p>


图1 定义第一个字符和第一行字符特殊显示