`

HTML — CSS选择器

阅读更多

一个样式规则由两部分组成:选择器和样式声明。选择器表明要为哪一个元素设置样式,样式声明则表明要应用哪些样式属性。如,我们想尽上文档中的一级标题 H1 以红色显示,就可以这样定义CSS规则:

h1 { color: red }

这样只要加载了该样式文档中所有<H1>标签都将应用这个样式。

<html>
	<head>
		<title></title>
		<style type='text/css'>
			h1{ color: red; }
		</style>
	</head>
	<body>		
		<h1>h1</h1><h2>h2</h2>		
	</body>
</html>

 效果图:

CSS选择器

有以下三种选择器:通过HTML标签类型、通过已声明类开或者通过元素的唯一ID。

标签类型的选择器

div h1 { color: red; }

表示只能<div>标签中的嵌套标签<h1>起作用:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			div h1{ color: red; }
		</style>
	</head>
	<body>		
		<h1>h1</h1> 
		<span>span</span> 
		<div>div</div> 
		<div><h1>div.h1</h1></div> 		
	</body>
</html>

效果图:

类选择器

. callout { border: solid blue 1px; background-color: cyan }

 如下使用:

<div class='callout' >...</div>

一个元素可以分配多个样式类。如果我们还有一个类样式名为 loud 时,可以同时使用:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			.callout { border: solid blue 1px; background-color: cyan }
			.loud { color: orange }
		</style>
	</head>
	<body>
		<span  class='callout' >callout</span> 
		<span  class='loud' >loud</span> 
		<span  class='callout loud' >callout loud</span> 
	</body>
</html>

 

效果图:

 

我们也可以混合使用样式类和基于元素的规则,来定义一个仅仅针对特定标签类弄的样式类。如:

span.highlight { background-color: yellow }

这个规则仅会应用在声明了值为 highlight 的类属性(即 class='highlight' )的 <span> 标签上。其他无该属性的 <span> 标签(即 span 上无 class='highlight' 类属性设置)或其他有 class='highlight' 属性设置的标签(比如说 <div  class='highlight' > )将不受影响。以下使用该样式:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			span.highlight { background-color: yellow }
		</style>
	</head>
	<body>
		<div class='highlight'>div</div>
		<span>without highlight</span><br>
		<span class='highlight'>span</span>
	</body>
</html>

 

效果图如下:

我们甚至可以与父子关系的选择器联合使用,创建在非常特定的场合下使用的规则:

div.prose span.highlight { background-color: yellow }

这个规则仅会应用在设置了prose样式类的<div>标签中嵌套的设置了highlight样式类的标签。应用上面的样式:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			div.prose span.highlight  { background-color: yellow }
		</style>
	</head>
	<body>
		<div class='prose'>div</div>
		<span class='highlight'>span</span>
		<div class='prose'>div<span class='highlight'>div.span</span></div>
	</body>
</html>

 

只有最后一句生效,且只有div里的嵌套标签span里的内容变颜色,如下图:

ID选择器

也可以为单个元素指定规则,它需要有唯一ID,这是通过在HTML中加上id属性来完成的。HTML中只会有一个使用这个ID的元素,所以,这样一类选择器通常只用来选择页面中的一个元素。例如,为了突出显示页面中的关闭按钮,我们可以这样定义样式:
#close { color: red }

使用以上样式:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			#close { color: red }
		</style>
	</head>
	<body>
		<input type='button' id='close' value='Close'>
	</body>
</html>

效果图:

伪选择器

在CSS中我们还可以定义基于伪选择器的样式 。浏览器定义了一些有限的伪选择器,这里展示一些最有用的,例如:

*:first-letter {
  font-size: 500%;
  color: red;
  float: left;
}


通过这个选择器,我们可以将任何元素的第一个字母以很大的粗体红色字体来显示,如下使用:

<html>
	<head>
		<title></title>
		<style type='text/css'>
			*:first-letter {
				font-size: 500%;
				color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<span>firse</span>
		second
		<div>third</div>
	</body>
</html>

 效果图:

我们还可以将这个规则限制大一点,就像这样:
 p.illuminated:first-letter {
  font-size: 500%;
  color: red;
  float: left;
}

这样的话,红色的效果只会应用在设置了illuminated样式类的<p>元素上。其他有用的伪选择器包括first-line hover 。hover可以改变当鼠标光标停在超链接上时,超链接的显示效果。例如,当鼠标光标停在链接上时,链接显示为黄色,我们可以编写下列规则:
a:hover{ color: yellow; }

<html>
	<head>
		<title></title>
		<style>
			 p.illuminated:first-letter {
			  font-size: 500%;
			  color: red;
			  float: left;
			}
			p:first-line {
			  font-size: 200%;
			  color: blue;
			  float: left;
			}
			a:hover{ color: red;font-size: 50 px; }
		</style>
	</head>
	<body>		
		<div class='illuminated'>div</div>
		<p>without illuminated</p>
		<p class='illuminated'>with illuminated</p>
		<a href='#'>a link </a>
	</body>
</html>

效果图:


 

 

  • 大小: 398 Bytes
  • 大小: 480 Bytes
  • 大小: 526 Bytes
  • 大小: 759 Bytes
  • 大小: 556 Bytes
  • 大小: 929 Bytes
  • 大小: 590 Bytes
  • 大小: 3.9 KB
分享到:
评论

相关推荐

    Termux (Android 5.0+).apk.cab

    Termux (Android 5.0+).apk.cab

    基于go、vue开发的堡垒机系统(运维安全审计系统)全部资料+详细文档.zip

    【资源说明】 基于go、vue开发的堡垒机系统(运维安全审计系统)全部资料+详细文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    葡萄城手册,快速上手,灵活报表

    制作报表

    基于C++与Qt的金山培训大作业源码汇总

    本项目为金山培训大作业源码汇总,采用C++与Qt技术构建,包含401个文件,涵盖106个C++源文件、72个头文件、41个PNG图片、27个项目文件以及HTML、JavaScript、CSS等多种文件类型。项目包含四个主要模块:KVector向量库、命令行会议系统、KSvg绘图板和KHttp音乐播放器。尽管最终未能入选,但展现了作者在C++编程和Qt框架应用方面的扎实功底和努力。

    (26408240)STM32F103+四个VL53L0代码(2020新).zip

    内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。

    基于课程设计:C语言爬虫、详细文档+全部资料+高分项目.zip

    【资源说明】 基于课程设计:C语言爬虫、详细文档+全部资料+高分项目.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    (176629254)杭州电子科技大学自动控制原理期末试卷答案 复习ppt

    《自动控制原理》是自动化及相关专业的重要课程,涵盖了控制系统的基础理论和分析方法。这份资料集是针对杭州电子科技大学自动控制原理课程的期末复习资源,包含了试卷答案和复习PPT,对于学习者来说是一份非常宝贵的参考资料。 我们来看文件"9自控原理第五章习题参考答案.doc",它提供了第五章的习题解答。第五章通常涉及根轨迹法,这是分析线性系统稳定性的一种图形方法。通过绘制根轨迹,我们可以直观地理解系统动态性能的变化,例如系统的稳定性、超调量和调节时间等。 接着,"1第一章作业(答案).docx"涵盖了课程的初步概念,如控制系统的基本组成部分、控制系统的定义以及开环与闭环控制的区别。第一章的内容通常包括控制系统的基本模型,如传递函数和信号流图。 "10测试4.docx"和"13第7章测试.docx"可能是关于控制系统设计和分析的测试题目,可能涉及到频率响应分析或状态空间模型等内容。第七章常常讨论系统稳定性分析,比如奈奎斯特稳定判据或劳斯判据。 "7测试1.docx"可能包含有关拉普拉斯变换和控制系统动态特性的问题,这是控制系统分析的基础工具。 "4自动控制第二章习题答案.pdf"提供了第二章习题

    066 - 直播逗大哥话术.docx

    066 - 直播逗大哥话术

    AOP项目demo 案例

    AOP项目demo 案例

    皮带输送线3D+2DCAD+加工件标准件清单BOMsw2016可编辑全套技术资料100%好用.zip

    皮带输送线3D+2DCAD+加工件标准件清单BOMsw2016可编辑全套技术资料100%好用.zip

    154-基于stm32单片机花样流水灯设计Proteus仿真+源程序.zip

    154-基于stm32单片机花样流水灯设计Proteus仿真+源程序.zip

    鲸鱼WOA-XGboost拟合预测建模模型,数据格式多维自变量输入,单维因变量输出,直接替数据就可以使用,程序内注释详细

    鲸鱼WOA-XGboost拟合预测建模模型,数据格式多维自变量输入,单维因变量输出,直接替数据就可以使用,程序内注释详细

    基于springboot的学生综合成绩测评系统源码(java毕业设计完整源码).zip

    项目均经过测试,可正常运行! 环境说明: 开发语言:java JDK版本:jdk1.8 框架:springboot 数据库:mysql 5.7/8 数据库工具:navicat 开发软件:eclipse/idea

    RocketDock-v1.3.5

    RocketDock-v1.3.5是一款专为Windows 7设计的桌面工具,它模仿Mac OS X的Dock功能,通过直观的图标排列提高应用启动效率。该工具提供快捷启动、动画效果、自定义设置以及扩展性,使用户能够根据个人喜好调整Dock栏并减少桌面杂乱。安装和设置过程简单,配有详细的说明文件,帮助用户更好地了解和使用工具。

    基于springboot的会员制医疗预约服务管理信息系统源码(java毕业设计完整源码+LW).zip

    会员制医疗预约服务管理信息系统的作用,可以提高会员制医疗预约服务管理的工作人员的效率,协助他们对会员制医疗预约服务信息进行统一管理,为管理者提供信息储存和查询搜索系统。一个良好的会员制医疗预约服务管理信息系统可以实现对会员制医疗预约服务的精细化管理:对在线会员制医疗预约服务管理流程的全过程进行电子化操作,其主要作用是管理和控制会员制医疗预约服务所有的信息,分析库存数据,使工作人员对会员制医疗预约服务管理信息系统进行监管,根据系统所提供的相应信息,采取适当的措施,及时补救管理中的漏洞,提高在线会员制医疗预约服务管理的工作效率,使得在线会员制医疗预约服务管理变的更加系统和规范。 环境说明: 开发语言:java JDK版本:jdk1.8 框架:springboot 数据库:mysql 5.7/8 数据库工具:navicat 开发软件:eclipse/idea

    (2368806)CCNA中文版PPT

    **CCNA(思科认证网络助理工程师)是网络技术领域中的一个基础认证,它涵盖了网络基础知识、IP编址、路由与交换技术等多个方面。以下是对CCNA中文版PPT中可能涉及的知识点的详细说明:** ### 第1章 高级IP编址 #### 1.1 IPv4地址结构 - IPv4地址由32位二进制组成,通常分为四段,每段8位,用点分十进制表示。 - 子网掩码用于定义网络部分和主机部分,如255.255.255.0。 - IP地址的分类:A类、B类、C类、D类(多播)和E类(保留)。 #### 1.2 子网划分 - 子网划分用于优化IP地址的分配,通过借用主机位创建更多的子网。 - 子网计算涉及掩码位数选择,以及如何确定可用的主机数和子网数。 - CIDR(无类别域间路由)表示法用于更有效地管理IP地址空间。 #### 1.3 私有IP地址 - 为了节省公网IP地址,私有IP地址被用于内部网络,如10.0.0.0/8,172.16.0.0/12,192.168.0.0/16。 #### 1.4 广播地址 - 每个网络都有一个特定的广播地址,所有数据包都会发送到这个地址以达到同一网络内的所有设备。

    基于springboot的藏区特产销售平台源码(java毕业设计完整源码+LW).zip

    项目实现了对特产信息管理、特产分类管理、特产分类管理、特产评分管理、系统管理、订单管理等业务进行管理。 环境说明: 开发语言:java JDK版本:jdk1.8 框架:springboot 数据库:mysql 5.7/8 数据库工具:navicat 开发软件:eclipse/idea

    “个人事务云服务”:日常事务管理系统的云计算应用

    随着21世纪网络和计算机技术的飞速发展,它们已经与我们的日常生活紧密融合。当前网络的运行速度已经达到千兆级别,覆盖范围广泛,深入到生活的每一个角落。这一进步推动了管理系统的发展,使得远程处理事务、远程工作信息管理和实时追踪工作状态成为可能。网上管理系统以其前所未有的体验满足了新时代的工作需求,因此得到了大力发展。 本系统是一个个人日常事务管理系统,利用计算机和网络技术开发的在线平台,能够实现日常安排、消费记录和重要提醒设置等功能。系统采用SSM框架和Vue技术,数据库使用MySQL,开发环境为Eclipse。系统用户角色包括普通用户和管理员,功能涵盖个人中心管理、用户管理、日常安排管理、消费记录管理和重要提醒管理。用户可以记录消费、安排日常事务和设置重要提醒,而管理员则负责管理用户信息和基础数据信息。该系统不仅方便了用户和管理员,还提高了个人事务管理的效率,更适应现代人的生活方式。

    基于java+springboot+mysql+微信小程序的考研资料分享系统 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea、微信开发者工具 数据库:MySql5.7以上 部署环境:maven 数据库工具:navicat

    如何使用Python和PIL库生成带竖排文字的封面图像

    如何使用Python和PIL库生成带竖排文字的封面图像

Global site tag (gtag.js) - Google Analytics