【前端寻宝之路】学习和使用CSS的所有选择器

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

specification: the precise definition or description of a problem

文章目录

  • `CSS选择器`
  • `基础选择器`
    • `类选择器`
    • `id选择器`
    • `通配符选择器`
  • `复合选择器`
    • `后代选择器通过子元素找父元素`
    • `通过选择器的组合`
    • `给超链接文字换颜色`
  • `伪类选择器`
    • `链接伪类选择器`
    • `按钮点击样式设置`

CSS选择器

参考链接:CSS选择器参考手册

如果标签一样,但我只想修改其中一个标签的内容格式,此时我们就需要用到:类选择器.

基础选择器

类选择器

.eat{color:red;
}.sleep{color:green;
}.game{color:blue;
}.play{font-size: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通过link引入css文件 --><link rel="stylesheet" href="./demo03.css">
</head>
<body><p class="eat">吃饭</p><p class="sleep">睡觉</p><p class="play game">打豆豆</p>
</body>
</html>

在这里插入图片描述

⚠️我们可以通过类选择器进行对应标签的内容格式的修改,如果是多种样式修改叠加,可以在类选择器里面设置多个变量,然后再通过CSS进行对应格式的设置.

在这里插入图片描述


id选择器

  • CSS中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的,不能被多个标签使用(是和 类选择器 最大的区别)
#fe{font-size: 90px;
}#sever{color:aquamarine;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo04.css">
</head>
<body><p id="fe">前端开发</p><p id="sever">后端开发</p>
</body>
</html>

在这里插入图片描述


通配符选择器

使用 * 的定义,选取所有的标签.

* {color: red ;
}
  • 页面所有的内容都会被改成 红色.
  • 不需要被页面结构调用.

通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距

#fe{font-size: 90px;
}#sever{color:aquamarine;
}*{background-color: beige;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo04.css">
</head>
<body><p id="fe">前端开发</p><p id="sever">后端开发</p>
</body>
</html>

在这里插入图片描述


复合选择器

  • 复合选择器:将之前学习的基础选择器进行组合

后代选择器通过子元素找父元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 后代选择器:通过子元素找父元素 --><style>ol li {color: red;}</style>
</head>
<body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol><li>吃饭</li><li>吃饭</li><li>吃饭</li></ol>
</body>
</html>

在这里插入图片描述

通过选择器的组合

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通过选择器的组合 --><style>.hobby li {color: red;}</style></head>
<body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol class="hobby"><li>吃饭</li><li>吃饭</li><li>吃饭</li></ol>
</body>
</html>

在这里插入图片描述


给超链接文字换颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li a {color: aqua;}</style></head>
<body><ul><li>吃饭</li><li>吃饭</li><li>吃饭</li></ul><ol class="hobby"><li>吃饭</li><li>吃饭</li><li>吃饭</li><li class="red"><a href="#">吃饭</a></li></ol>
</body>
</html>

在这里插入图片描述


伪类选择器

伪类选择器:用来定义元素状态

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下但未弹起)
现在我们要使用伪类选择器来实现:
默认时刻超链接展示黑色
当鼠标悬停到上面时,此时展示红色
按下鼠标时展示绿色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {color:black}a:hover {color:crimson}a:active {color: chartreuse;}</style>
</head>
<body><a href="https://blog.csdn.net/Aileenvov?spm=1011.2415.3001.5343">Aileen</a>
</body>
</html>

在这里插入图片描述


按钮点击样式设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置按钮的样式 */input {color: crimson;}input:hover {color: blue;}input:active {color: cornsilk;}</style>
</head>
<body><input type="button" value="按钮">
</body>
</html>

在这里插入图片描述
](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何选择AI项目:从任务自动化到社会价值的全面考虑

目录 前言1 任务自动化的首要选择1.1 公司痛点分析&#xff1a;深入挖掘潜在问题1.2 数据集的收集与大小考虑&#xff1a;确保数据质量和规模匹配 2 AI项目的商业潜力2.1 技术考察与性能目标&#xff1a;确保技术选择符合项目需求2.2 商业考虑与成本效益分析&#xff1a;全面评…

作用域链的理解(超级详细)

文章目录 一、作用域全局作用域函数作用域块级作用域 二、词法作用域三、作用域链 一、作用域 作用域&#xff0c;即变量&#xff08;变量作用域又称上下文&#xff09;和函数生效&#xff08;能被访问&#xff09;的区域或集合 换句话说&#xff0c;作用域决定了代码区块中变…

Spring之注入模型

前言 之前我写过一篇关于BeanDefinition的文章,讲述了各个属性的作用,其中有一个属性我没有提到,因为这个属性比较重要,所以这里单独开一篇文章来说明 上一篇博文链接Spring之BeanDefinitionhttps://blog.csdn.net/qq_38257958/article/details/134823169?spm1001.2014.3001…

【Datawhale学习笔记】从大模型到AgentScope

从大模型到AgentScope AgentScope是一款全新的Multi-Agent框架&#xff0c;专为应用开发者打造&#xff0c;旨在提供高易用、高可靠的编程体验&#xff01; 高易用&#xff1a;AgentScope支持纯Python编程&#xff0c;提供多种语法工具实现灵活的应用流程编排&#xff0c;内置…

pc端vue2项目使用uniapp组件

项目示例下载 运行实例&#xff1a; 这是我在pc端做移动端底代码时的需求&#xff0c;只能在vue2使用&#xff0c;vue3暂时不知道怎么兼容。 安装依赖包时可能会报&#xff1a;npm install Failed to set up Chromium r756035! Set “PUPPETEER_SKIP_DOWNLOAD” env variable …

数据治理实践——金融行业大数据治理的方向与实践

目录 一、证券数据治理服务化背景 1.1 金融数据治理发展趋势 1.2 证券行业数据治理建设背景 1.3 证券行业数据治理目标 1.4 证券行业数据治理痛点 二、证券数据治理服务化实践 2.1 国信证券数据治理建设框架 2.2 国信证券数据治理建设思路 2.3 数据模型管理 2.4 数据…

ChatGPT+MATLAB应用

MatGPT是一个由chatGPT类支持的MATLAB应用程序&#xff0c;由官方Toshiaki Takeuchi开发&#xff0c;允许您轻松访问OpenAI提供的chatGPT API。作为官方发布的内容&#xff0c;可靠性较高&#xff0c;而且也是完全免费开源的&#xff0c;全程自己配置&#xff0c;无需注册码或用…

SpecAugment: A Simple Data Augmentation Method for Automatic Speech Recognition

摘要 我们提出了SpecAugment&#xff0c;这是一种用于语音识别的简单数据增强方法。SpecAugment直接应用于神经网络的特征输入&#xff08;即滤波器组系数&#xff09;。增强策略包括对特征进行变形、遮蔽频道块和遮蔽时间步块。我们在端到端语音识别任务中将SpecAugment应用于…

【SQL】601. 体育馆的人流量(with as 临时表;id减去row_number()思路)

前述 知识点学习&#xff1a; with as 和临时表的使用12、关于临时表和with as子查询部分 题目描述 leetcode题目&#xff1a;601. 体育馆的人流量 思路 关键&#xff1a;如何确定id是连续的三行或更多行记录 方法一&#xff1a; 多次连表&#xff0c;筛选查询方法二&…

vulhub中Weblogic SSRF漏洞复现

Weblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi等脆弱组件。 访问http://your-ip:7001/uddiexplorer/&#xff0c;无需登录即可查看uddiexplorer应用。 SSRF漏洞测试 SSRF漏洞存在于http://your-ip:7001/ud…

Python分支结构

我们刚开始写的Python代码都是一条一条语句顺序执行&#xff0c;这种代码结构通常称之为顺序结构。 然而仅有顺序结构并不能解决所有的问题&#xff0c;比如我们设计一个游戏&#xff0c;游戏第一关的通关条件是玩家在一分钟内跑完全程&#xff0c;那么在完成本局游戏后&#x…

js实现导出/下载excel文件

js实现导出/下载excel文件 // response 为导出接口返回数据&#xff0c;如上图 const exportExcel (response, fileName:string) >{const blob new Blob([response.data], {type: response.headers[content-type] //使用获取的excel格式});const downloadElement documen…

mysql5.6---windows和linux安装教程和忘记密码怎么办

一、windows安装 1.完成解压 解压完成之后将其放到你喜欢的地址当中去&#xff0c;这里我默认放在了D盘&#xff0c;这是我的根目录 2.配置环境变量 我的电脑->属性->高级->环境变量->系统变量 选择PATH,在其后面添加: (注意自己的安装地址) D:\mysql-5.6.49…

数据结构:图的存储与遍历(待续)

图&#xff08;Graph&#xff09;是一种较线性表和树更为复杂的非线性结构。在图结构中&#xff0c;对结点&#xff08;图中常称为顶点&#xff09;的前驱和后继个数不加限制&#xff0c; 即结点之间的关系是任意的。 一、基本概念和一般结论 因为一条边关联两个顶点&#xff0…

12---风扇电路设计

视频链接 风扇硬件电路设计01_哔哩哔哩_bilibili 风扇电路设计 1、风扇简介 电脑风扇又称为散热风扇&#xff0c;一般用于散热。提供给散热器和机箱使用。市面上一般的散热风扇尺寸大小由直径2.5cm到30cm都有&#xff0c;厚度由6mm到76mm都有&#xff0c;而根据不同运作要求…

抽样算法——【数据科学与工程算法基础】

一、前言 这是课程的第二章节——抽样算法&#xff0c;主要分为三类。 详情可参考&#xff1a; 数据科学的算法基础——学习记录跳转中心 二、正篇 1.系统抽样 课本只介绍了最简单的——等距抽样。 直线等距抽样&#xff08;Nn*k&#xff09;&#xff1a;即总体个数可以被抽…

JAVA实战开源项目:学生日常行为评分管理系统(Vue+SpringBoot)

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.2.1 登录注册模块2.2.2 用户管理模块2.2.3 评分项目模块2.2.4 评分数据模块2.2.5 数据字典模块 2.3 可行性设计2.4 用例设计2.5 数据库设计2.5.1 整体 E-R 图2.5.2 用户2.5.3 评分项目2.5.4 评分数据2.5.…

弹性盒子布局 Flexbox Layout

可以嵌套下去 1.display 属性 默认行排列 <style>.flex-item{ height: 20px;width: 10px;background-color: #f1f1f1;margin: 10px;}</style> </head> <body> <div class"flex-container"><div class"flex-item">1&l…

功能测试转自动化测试好不好转型?

手工测试做了好多年&#xff0c;点点点成了每天必须做的事情。但是随着自动化测试趋势的日渐明显&#xff0c;以及受到薪资、技能的双重考验&#xff0c;掌握自动化测试成为了必备技能。 手工转自动化测试&#xff0c;不是一蹴而就的。“预先善其事&#xff0c;必先利其器”&a…

C++:2024/3/11

作业1&#xff1a;编程 要求&#xff1a;提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 代码&#xff1a; #include <iostream>using namespace std;int main() {string str;cout << "请输入一个字…