《HTML 5与CSS 3 权威指南(第4版·下册)》 —16.3 结构性伪类选择器

举报
华章计算机 发表于 2019/11/21 12:39:22 2019/11/21
【摘要】 本节书摘来自华章计算机《HTML 5与CSS 3 权威指南(第4版·下册)》一书中第16章,第16.3节,作者是陆凌牛。

16.3 结构性伪类选择器

本节介绍CSS 3中的结构性伪类选择器。在介绍结构性伪类选择器之前,先来介绍一下CSS中的伪类选择器及伪元素。

16.3.1 CSS中的伪类选择器及伪元素

1.伪类选择器概述

我们知道,在CSS中,可以使用类选择器把相同的元素定义成不同的样式,如针对一个p元素,我们可以做如下所示定义。

p.right{text-align:right}

p.center{text-align:right}

然后在页面上对p元素使用class属性,把定义好的样式指定给具体的p元素,代码如下所示。

<p>测试文字</p>

<p>测试文字</p>

在CSS中,除了上面所述的类选择器之外,还有一种伪类选择器,这种伪类选择器与类选择器的区别是,类选择器可以随便起名,如上面的“p.right”与“p.center”,你也可以命名为“p.class1”与“p.class2”,然后在页面上使用“class='class1'”与“class='class2'”,但是伪类选择器是CSS中已经定义好的选择器,不能随便起名。在CSS中我们最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下所示。

a:link {color:#FF0000;text-decoration:none}

a:visited {color:#00FF00;text-decoration:none}

a:hover {color:#FF00FF;text-decoration:underline}

a:active {color:#0000FF;text-decoration:underline}

2. 伪元素选择器概述

伪元素选择器是指并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器,它的使用方法如下所示。

选择器:伪元素{属性:值}

伪元素选择器也可以与类配合使用,使用方法如下所示。

选择器.类名:伪元素{属性:值}

在CSS中,主要有如下四个伪元素选择器。

(1)first-line伪元素选择器

first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

代码清单16-4是它的一个使用示例,在该示例中,有一个p元素,在该元素内存在两行文字,使用first-line伪元素选择器将第一行文字设为蓝色。

代码清单16-4 first-line伪元素使用示例

image.png

image.png

这段代码的运行结果如图16-6所示。

(2)first-letter伪元素选择器

first-letter伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或日文等汉字)使用样式。

代码清单16-5是first-letter伪元素选择器的一个使用示例,在该示例中,有两段文字—一段是英文,另一段是中文,使用first-letter伪元素选择器来设置这两段文字的开头字母或文字的颜色为蓝色。

代码清单16-5 first-letter伪元素选择器

image.png

这段代码的运行结果如图16-7所示。

            image.png

      图16-6 first-line伪元素使用示例  图16-7 first-letter伪元素使用示例

(3)before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容,使用方法如下所示。

// 可以插入一段文字

<元素〉:before

{

    content:插入文字

}

// 也可以插入其他内容

<元素〉:before

{

    content:url(test.wav)

}

代码清单16-6是before伪元素选择器的一个使用示例,在该示例中有一个ul列表,该列表中有几个li列表项目,使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。

代码清单16-6 before伪元素选择器的使用示例

image.png

这段代码的运行结果如图16-8所示。

(4)after伪元素选择器

after伪元素选择器用于在某个元素之后插入一些内容,使用方法如下所示。

<元素>:after

{

    content:插入文字

}

// 也可以插入其他内容

<元素>:after

{

    content:url(test.wav)

}

代码清单16-7是after伪元素选择器的一个使用示例,在该示例中有一个ul列表,这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目,每个列表项目中存放了对于某部电影的超链接,使用after伪元素选择器在每个超链接的后面加入“(仅用于测试,请勿用于商业用途。)”的文字,并且将文字颜色设为红色。

代码清单16-7 after伪元素选择器的使用示例

image.png

这段代码的运行结果如图16-9所示。

            image.png

      图16-8 before伪元素使用示例      图16-9 after伪元素选择器使用示例


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。