html:(29):伪选择符和分组选择符

伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

关于伪选择符：

关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{color:red;font-size:20px;
}
</style>
</head>
<body><h1>勇气</h1><p class="first">三年级时，我还是一个<a href="https://blog.csdn.net/weixin_43392489">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

运行结果

分组选择符

当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:green;}
.first,#second span{color:green;}
</style>
</head>
<body><h1>勇气</h1><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p><p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

运行结果

html:(29):伪选择符和分组选择符相关推荐

[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...
一般没有系统的学习过,只是在网上看一些片断教程的人.见到最多的可能也就是: 元素选择符(例如:body .a .li ) ID选择符(例如:#head.#body.#foot) 类选择符(例如:.re ...
08.28 JavaScript 边界选择修饰符模式单元修饰符正则的使用
#### 边界的修饰 * \b 单词边界 * \B 不是单词边界 * ^ 字符串开始边界 * $ 字符串结束边界 * 先行断言(正向预查) (?=) * 负向 ...
段选择符和段描述符的关系
段选择符用来表示指向哪个段描述符,即用来在段描述符中寻址,前13位是地址,能寻0到(2^13)-1,因此段描述符表的大小就是 8192,他还牵扯到一些特权级的限制,后三位:段描述符是用来表示这个段的一 ...
【2021.03.10】段描述符与段选择子、GDT、LDT
要点回顾前文提到,当写入一个段寄存器的时候,只给了一个16位的数值,但是段寄存器有96位. 那么剩下的80位从哪里来的?这个16位的数值是随便写的吗? Windbg指令指令功能 r 查看寄存器 ...
Word框选一整段文字如何防止框到换行符？word怎么在选择的时候不选择上换行符，word选中段尾不选回车符
Word框选一整段文字如何防止框到换行符?word怎么在选择的时候不选择上换行符,word选中段尾不选回车符如下图所示
关于移动端选择所有的分组和选择多个单个的，跟发布朋友圈选择分组一样
移动端选择所有的分组和选择多个单个的 //HTML代码 <div class="" style="overflow:auto;height: 60%;"& ...
牛客网Java刷题知识点之插入排序（直接插入排序和希尔排序）、选择排序（直接选择排序和堆排序）、冒泡排序、快速排序、归并排序和基数排序（博主推荐）...
不多说,直接上干货! 插入排序包括直接插入排序.希尔排序. 1.直接插入排序: 如何写成代码: 首先设定插入次数,即循环次数,for(int i=1;i<length;i++),1个数的那次不用 ...
【编译原理笔记20】代码生成：代码生成器的主要任务，一个简单的目标机模型，指令选择，寄存器的选择，寄存器选择函数getReg的设计，窥孔优化
本次笔记内容: 9-1 代码生成器的主要任务 9-2 一个简单的目标机模型 9-3 指令选择 9-4 寄存器的选择 9-5 寄存器选择函数getReg的设计 9-6 窥孔优化本节课幻灯片,见于我的 ...

html:(29):伪选择符和分组选择符

伪类选择符

分组选择符

html:(29):伪选择符和分组选择符相关推荐

最新文章

热门文章