请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5与CSS3基础完全自学教程(九)

[复制链接]
发表于 2020-6-28 18:30:08 | 显示全部楼层 |阅读模式

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注,第一时间看文章!

导读:本小节主要讲解 CSS 选择器中的伪类选择器,其中包含什么是伪类选择器、伪类选择器的种类等内容。伪类选择器的使用离不开之前学习的 CSS 选择器,而且用法和作用都比较特殊,所以学习的过程中要多通过练习来理解伪类选择器


伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的 HTML 元素的状态信息。

例如 :hover 伪类选择器可以用来在用户将鼠标悬停在按钮上时改变按钮的颜色。如下示例代码所示:

1/* 所有用户指针悬停的按钮 */
2button:hover {
3  color: blue;
4}

伪类选择器的语法结构如下所示:

1选择器:伪类 {
2  属性 : 属性值;
3}

伪类选择器的具体语法格式为 :伪类,这里一定不要忘记 :

说明:CSS 允许在同一个选择器上同时编写多个伪类选择器。


CSS 版本从第一版本发展到第三版本,提供的伪类选择器的数量已经很庞大了。尤其 CSS3 版本新增了大量的伪类选择器

如下图所示展示了 CSS 目前提供的所有伪类选择器

05-01.png

提示:上图由 MDN 网站提供。

伪类选择器的数量这么多,为了更好地梳理伪类选择器,我们可以按照用途的不同分为如下 5 种类型:

  1. 动态伪类选择器:常与<a>元素配合使用,用来表示用户的某种行为状态。

  2. 目标伪类选择器:常与<a>元素配合使用,用来定位当前 HTML 页面中唯一一个目标元素。

  3. 元素状态伪类选择器:常与表单组件元素配合使用,用来表示表单组件的某种状态。

  4. 结构伪类选择器:常与<table>元素配合使用,利用 HTML 元素之间的关系定位目标元素。

  5. 否定伪类选择器:用来定位与指定选择器不匹配的 HTML 元素。

说明:以上 5 种类型的伪类选择器,除否定伪类选择器会在本小节进行讲解之外,其他 4 种类型会在后续对应章节中进行详细讲解。


否定伪类选择器的语法结构如下所示:

1:not(selector) {
2    属性 : 属性值;
3}

否定伪类选择器的作用是用来定位不匹配 selector 选择器定位的 HTML 元素的元素。可能这句话看起来比较绕,不太好懂。

接下来我们来看一个示例,通过示例代码会更容易理解否定伪类选择器的用法:

 1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>HTML元素之间的关系</title>
7  <style>
8    .fancy {
9      text-shadow2px 2px 3px gold;
10    }
11
12    p:not(.fancy) {
13      color: green;
14    }
15
16    body :not(p) {
17      text-decoration: underline;
18    }
19  
</style>
20</head>
21
22<body>
23  <p>我是一个段落。</p>
24  <p class="fancy">我好看极了!</p>
25  <div>我不是一个段落。</div>
26</body>
27
28</html>

上述示例代码运行效果如下图所示:

05-02.png

在上述示例代码中,共使用了两次否定伪类选择器:

  • 第一次,是用来定位 class 属性值不是 fancy 的<p>元素。具体示例代码如下所示:

1p:not(.fancy) {
2  color: green;
3}
  1. 通过 p 类型选择器定位 HTML 页面中所有的<p>元素

  2. 在所有<p>元素中定位类名为 .fancy<p>元素

  3. 否定伪类选择器定位与第 2 步相反的元素集

  • 第二次,是用来定位<body>元素中不是<p>元素的元素。具体示例代码如下所示:

1body :not(p) {
2  text-decoration: underline;
3}
  1. 通过<body>类型选择器定位 HTML 元素中<body>元素内所有的元素

  2. <body>元素内所有的元素定位所有的<p>元素

  3. 否定伪类选择器定位与第 2 步相反的元素集

通过上述示例的运行和解析,相信应该对否定伪类选择器理解的更进一步了。

注意:

  • 可以利用这个伪类提高规则的优先级。例如, #foo:not(#bar)#foo 会匹配相同的元素。但是前者的优先级更高。

  • :not(foo) 将匹配任何非 foo 元素,包括 html 和 body 元素。

  • 这个选择器只会应用在一个元素上,你无法用它排除所有父元素。

此内容摘自 MDN 网站的否定伪类选择器文章


总结

本小节讲解了 CSS 选择器中的伪类选择器,其中包含了伪类选择器的概念、语法、种类,以及否定伪类选择器的用法等内容。

预告:下一节,我们将讲解 CSS 选择器中的伪元素选择器

如要转载本文,请先加作者微信(2080954535,与 QQ 同号),获得转载许可。原创不易,请尊重作者劳动!

作者二维码.png


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-12 03:45 , Processed in 0.230314 second(s), 36 queries .

快速回复 返回顶部 返回列表