程序员经验分享-hwhale

CSS层叠样式表-选择器

2023-11-14

1、CSS

（1）特点
  • 相同属性会覆盖，不同属性会叠加
（2）引入方式
  • 外部样式：在head标签中使用link标签引入css文件
  • 内嵌样式：在head标签中使用style标签进行书写
  • 行内样式：在对应标签中添加style属性
1）外部样式
  • W3C School文档：https://www.w3school.com.cn/tags/tag_link.asp
常用属性 描述
type属性 定义链接文档类型
rel属性 定义当前文档与链接文档的关系
href属性 定义链接文档位置

① css代码

  • 单独创建一个.css结尾的文件，写入以下内容（文件名称自定义）
/* 给div标签添加黑色实线线条和粉色背景颜色 */
div {
	border:1px solid black;
	background-color:pink;
}

/* 给p标签内容变为蓝色 */
p {
	color:blue;
}

/* 给strong标签内容变为绿色 */
strong {
	color:green;
}

② html代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<link href="./css/link.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

2）内嵌样式

① 代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<!-- css代码 -->
	<style>
		/* 给div标签添加黑色实线线条和粉色背景颜色 */
		div {
			border:1px solid black;
			background-color:pink;
		}

		/* 给p标签内容变为蓝色 */
		p {
			color:blue;
		}

		/* 给strong标签内容变为绿色 */
		strong {
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

② 运行效果

Picture

3）行内样式

① 代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
</head>

<body>
	<div style="border:1px solid black;background-color:pink;">
		<p style="color:blue;">这是一个p标签</p>
		<strong style="color:green;">这是一个strong标签</strong>
	</div>
</body>

</html>

② 运行效果

Picture

2、简单选择器

注意

  • 这里为了方便展示代码，统一使用内嵌样式进行书写，实际开发工作中提倡优先使用外部样式
（1）元素选择器（标签选择器）

① 语法格式

	标签名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
			border:1px solid black;
			background-color:pink;
		}
		p {
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（2）class选择器（类选择器）
  • 按照类型，可以重复使用，例如：p标签和strong标签文本颜色统一设置为蓝色，创建一个类选择器即可

① 语法格式：

	.类名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		.box {
			border:1px solid black;
			background-color:pink;
		}
		.content {
			color:blue;
		}
	</style>
</head>

<body>
	<div class="box">
		<p class="content">这是一个p标签</p>
		<strong class="content">这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（3）ID选择器
  • id选择器，值唯一，不能重复使用

① 语法格式

	#id名 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		#box {
			border:1px solid black;
			background-color:pink;
		}
		#content {
			color:blue;
		}
	</style>
</head>

<body>
	<div id="box">
		<p id="content">这是一个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（4）通配符选择器
  • 选中所有标签，所有标签都会受到影响，不过权重最低

① 语法格式：

	* {
		属性1:属性值;
		属性2:属性值;	
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		*{
			color:blue;
			font-size:25px;
		}
	</style>
</head>

<body>
	<div>
		<p>这是一个p标签</p>
		<strong>这是一个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（5）选择器权重
名称 权重值
!important infinity
行内样式 1000
ID选择器 100
class选择器 10
元素选择器 1
通配符选择器 0
(1) 选择器命名规则（适用于自定义名称的选择器）
  • 不能以数字和特殊字符开头；
  • 要以英文开头(或者拼音)；
  • 见名知意；
  • 使用驼峰命名法(小驼峰/大驼峰)
(2) 选择器优先级及权重
  • 选择器优先级：!important > 行内样式 > ID选择器 > class选择器 > 元素选择器 > 通配符选择器
  • 权重相同的时候，先看先后顺序
  • 权重不同的时候，看权重大小
  • 权重可以叠加

3、组合选择器

（1）后代选择器
  • 选中父级标签中的所有指定的子级标签

① 语法格式

	父级 子级 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div strong{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（2）子代选择器
  • 只选中选择器的后一代，跨代不选中

① 语法格式：

	父级>子级 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div>strong{
			color:blue;
		}
		div>strong{
			color:green;
		}
	</style>
</head>

<body>
	<div>
		<strong>这是第一个strong标签</strong>
		<p>这是第一个<strong>p</strong>标签</p>
		<span>这是一个<strong>span标签</strong></span>
		<p>这是第二个p标签</p>
		<strong>这是第二个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（3）同级选择器
  • 同级选中，只选择后面出现的元素，前面的不选中

① 语法格式：

	元素~元素 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		strong~p{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<p>这是第三个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第第四个p标签</p>
		<span>这是一个span标签</span>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（4）相邻选择器
  • 选中同级的下一个元素

① 语法格式：

	元素+元素 {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p+strong{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p>这是第二个p标签</p>
		<strong>这是第一个strong标签</strong>
		<strong>这是第二个strong标签</strong>
		<strong>这是第三个strong标签</strong>
	</div>
</body>

</html>

③ 运行效果

Picture

（5）交集选择器
  • 例如：选中div中，既有p，也有.one类的元素

① 语法格式：

	div span.one {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div p.one{
			color:blue;
		}
	</style>
</head>

<body>
	<div>
		<p>这是第一个p标签</p>
		<p class="one">这是第二个p标签</p>
		<p>这是第三个p标签</p>
		<p class="one">这是第四个p标签</p>
		<p>这是第五个p标签</p>
	</div>
</body>

</html>

③ 运行效果

Picture

（6）伪类选择器
  • 当鼠标移入的时候，被选中的当前元素，设定为某种状态

① 语法格式：

	选择器:hover {
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		div {
			width:300px;
			height:300px;
			background-color:aqua;
		}
		div:hover{
			background-color:pink;
		}
	</style>
</head>

<body>
	<div></div>
</body>

</html>

③ 运行效果

打开时颜色Picture

鼠标移入时颜色Picture

（7）伪元素选择器

伪元素特点：

  • 能被CSS选中和修改，但是没有html结构
  • 天生就是‘行内元素’，通过CSS选中并修改
  • 特性和‘行内元素’一致
（1）before
  • 在选中的元素前面添加内容

① 语法格式：

	选择器:before {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:before{
			content:"这是before添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ 运行效果

Picture

（2）after
  • 在选中的元素后面添加内容

① 语法格式：

	选择器:after {
		content:"内容"
		属性1:属性值;
		属性2:属性值;
	}

② 示例：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Demo</title>
	<style>
		p:after{
			content:"这是after添加的内容";
			color:blue;
		}
	</style>
</head>

<body>
	<p>这是一个p标签</p>
</body>

</html>

③ 运行效果

Picture

更多选择器学习，请参考官方文档

https://www.apiref.com/css-zh/index.htm

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

CSS3

CSS层叠样式表-选择器 的相关文章

随机推荐

  • 提高map[key]=value的效率

    当关乎效率时应该在map operator 和map insert之间仔细选择 我们知道 这个表达式 m k v 检查键k是否已经在map里 如果不 就添加上 以v作为它的对应值 如果k已经在map里 它的关联值被更新成v 举例一 考虑插入

  • 搭建第一个Dapp应用（4）——搭建SmartDev-Scaffold——2021.5.3

    搭建第一个Dapp应用 4 搭建SmartDev Scaffold 一丶环境配置 Java gt JDK 1 8 Solidity 0 4 25 Git 下载安装包需要使用Git Gradle 大于6 小于7 使用gradle7会报错 二丶

  • JavaEE规范与系统结构

    JavaEE规范 JavaEE规范是J2EE规范的新名称 早期被称为J2EE规范 其全称是Java 2 Platform Enterprise Edition 它是由SUN公司领导 各厂家共同制定并得到广泛认可的工业标准 JCP组织成员 之

  • Jenkins之定时构建

    1 操作环境 1 Jenkins Jenkins 2 75 2 定时构建 1 定时构建语法 第一个 表示分钟 取值0 59 第二个 表示小时 取值0 23 第三个 表示一个月的第几天 取值1 31 第四个 表示第几月 取值1 12 第五个

  • 由java：local_policy.jar和US_export_policy.jar引发的“血案”

    起因 今天项目上线 上线后监测日志 发现由异常 开始查找问题 进而引发了 血案 线上日志报错如下 Illegal key size 画外音 看到线上项目出现问题心里慌的一批 赶紧扒拉出代码 一行一行对着报错日志查看 最后定位到 AES ae

  • 制作SD卡启动盘（编译烧写u-boot）

    一 SD启动盘制作 将我们的sdfuse q文件夹拷贝到虚拟机Ubuntu的共享目录下 sudo cp samba NFS FTP sdfuse q a 将文件夹复制到 home chen 目录下 cd sdfuse q 进入sdfuse

  • 西门子PLC s7-1200学习之路

    1 Introduction 最近因为一个项目需要使用西门子PLC 买了一个入门级的PLC s7 1200 并完成了一个PLC和PC通过TCP进行通信的小程序 为了防止活干完了 内容就全忘了 所以用一个笔记进行梳理和总结 入门一种语言 需要

  • 专访蒋宇捷：技术管理者应具备哪些能力？(转载)

    摘要 近期 本站记者采访了CSDN社区活跃用户 百度技术经理蒋宇捷 他认为一个合格的技术管理者应该具备深度认知产品 冷静决策 以及良好的沟通能力 还要秉持着技术源于一线 永远不能脱离一线的观念 蒋宇捷 西安交通大学硕士 现任百度技术经理 曾

  • [系统安全] 三十九.Powershell恶意代码检测系列 (1)Powershell基础入门及管道和变量的用法

    您可能之前看到过我写的类似文章 为什么还要重复撰写呢 只是想更好地帮助初学者了解病毒逆向分析和系统安全 更加成体系且不破坏之前的系列 因此 我重新开设了这个专栏 准备系统整理和深入学习系统安全 逆向分析和恶意代码检测 系统安全 系列文章会更

  • 水杯测试用例小记

    水杯测试用例

  • python编写数学公式-Python引入数学函数计算

    Python引入数学函数计算 在利用Python对Abaqus进行相关编程时经常需要用到数学函数 比如三角函数等 在使用这些函数之前需要先引入数学模块 Import math 之后利用时还需要利用层级关系 比如math pi表示 一个示例如

  • go: no such tool “compile“(一次糟糕体验)

    这是一次离谱问题和胡搞一通莫名解决的记录 背景 win11系统下 原有的go1 18更新到go1 19后出现了莫名的go no sucn tool compile 的情况 当时检查go env 如下 PS D Desktop gt go e

  • pycharm使用wsl、SSH

    pycharm wsl 修改apt get源 安装miniconda 配置pycharm SSH Using the Python remote debug server configuration wsl windows sub linu

  • Python10行代码实现模拟百度搜索

    作者主页 士别三日wyx Python模拟百度搜索 1 获取百度搜索接口 2 指定搜索内容 3 UA伪装 4 将响应内容写入文件 5 使用浏览器打开页面 源码如下 1000块钱做个百度 能提出这种要求的客户实乃乙方克星 民族之光 科创永动机

  • 30个落地案例告诉你，区块链到底怎么用

    区块链的商业价值 一千个企业就有一千种解读 唯链 VeChain 起步于2015年 作为国内知名的公链项目之一 它的行事作风一直显得不太 合群 大多数公链生态所追随的热点如DAPP游戏开发 Defi Staking等等 唯链似乎都鲜少参与

  • [STL]vector常见用法详解

    目录 引入 常见用法介绍 1 vector的定义 2 vector容器内元素的访问 3 vector常用函数实例解析 1 push back 2 pop back 3 size 4 clear 5 insert 6 erase vector

  • 如果有一天程序员再也不忙了

    前言 程序员是世界上最可爱的人 正文 一 程序员是什么 二 程序员写的代码有什么用 三 程序员最本质的不同是什么 四 程序员为什么找不到妹子 五 程序员的工作究竟有多忙 六 有一天程序员不忙了会怎样 七 找不到妹子真的是因为工作忙吗 八 你

  • .NET Core 获取自定义配置文件信息

    官方文档说 引用 Microsoft AspNetCore App 元包或将包引用添加到 Microsoft Extensions Options ConfigurationExtensions 包 简而言之 直接可以获取 不用引用包了 a

  • 盖茨来了：比起去火星，地球有些事更紧迫

    2023年6月14日晚 比尔 盖茨在微博更新了一条消息 他写道 我刚降落在北京 这是我2019年以来的首次访问 盖茨基金会与中国伙伴合作应对全球健康和发展挑战已经超过15年 我非常高兴能与中国的伙伴们见面 在减少儿童死亡和贫困方面 世界取得

  • CSS层叠样式表-选择器

    1 CSS 1 特点 相同属性会覆盖 不同属性会叠加 2 引入方式 外部样式 在head标签中使用link标签引入css文件 内嵌样式 在head标签中使用style标签进行书写 行内样式 在对应标签中添加style属性 1 外部样式 W3

热门标签