当前位置：首页 > news >正文

CSS|04 复合选择器伪类选择器属性选择器美化超链接

news 2025/11/3 7:26:37

基本选择器：见上篇基本选择器

		复合选择器选择器1,选择器2{属性:值;} 多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔举例： p,h1,h2{margin:0px;}E F{属性:值;}  后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔举例： #slidebar p {font-color: #990000；}E > F{属性:值;}子元素选择器，匹配所有E元素的子元素F举例： div > p{color:#990000;}E + F{属性:值;}相邻元素选择器，匹配所有紧随E元素之后的同级元素F举例： div + div{color:#990000;}伪类选择器伪类选择器是用来给超级链接的不同状态来设置样式。:link 向未被访问的链接添加样式 :visitied 向已被访问的链接添加样式:hover 当鼠标悬浮在元素上方时，向元素添加样式:active 鼠标放在元素上面时，点击的一瞬间注意：超级链接的不同状态它其实是有顺序。也就是说伪类选择器设置其实是有顺序。如果不按照伪类选择器的顺序，那么样式就会失效。顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate” LVHA属性选择器什么是属性选择器？属性选择器它是与标签的属性名和属性值有关。属性选择器是通过标签的属性名和属性值来匹配元素。选择器            含义                           举例[attr]           匹配指定的属性名的所有元素         h1[align]{}[attr="val"]     匹配属性等于指定值的所有元素       h1[align="center"]{}[attr*="val"]    匹配属性中包含指定值的所有元素      Font[color*="00"][attr$="val"]    匹配属性的值以指定值结束的所有元素   Font[color$="00"][attr^="val"]    匹配属性以指定值开头的所有元素      Font[color^="00"]

复合选择器

多元素选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多元素选择器</title><style type="text/css">/*多元素选择器格式：选择器1,选择器2,,选择器n{属性:值;}*//*div,p,h2,li{color: #f00;text-decoration: underline;  } */.box,p,h2,li{color: #f00;text-decoration: underline;  /*下划线*/}        </style>
</head>
<body><div class="box">HTML</div><p>CSS</p><h2>php</h2><ul><li>北京</li><li>广州</li><li>上海</li><li>深圳</li></ul></body>
</html>

在这里插入图片描述

后代元素选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>后代元素选择器</title><style type="text/css">/*后代元素选择器格式：E F{属性:值;}作： 匹配.box这个盒子里面所有的h2后代*/.box h2{color: #f00;text-decoration: underline;}      </style>
</head>
<body><!-- class=box这个元素中有三个子元素第一个子元素：<h2>HTML</h2>第二个子元素：<div></div>还有子元素<h2>CSS</h2>第三个子元素：<h2>PHP</h2> --><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div></body>
</html>

在这里插入图片描述

子元素选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>子元素选择器</title><style type="text/css">/*子元素选择器格式：E > F{属性:值;}作： 匹配.box这个盒子里面所有的是h2的子元素，只匹配一级元素*/.box > h2{color: #f00;text-decoration: underline;}      </style>
</head>
<body><!-- class=box这个元素中有三个子元素第一个子元素：<h2>HTML</h2>第二个子元素：<div></div>还有子元素<h2>CSS</h2>第三个子元素：<h2>PHP</h2> --><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div></body>
</html>

在这里插入图片描述

相邻元素选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>相邻元素选择器</title><style type="text/css">/*相邻元素选择器格式：E + F{属性:值;}作用： 要满足一下前提才会匹配1. E元素和F元素必须是兄弟关系2. E元素和F元素必须紧挨着，之间没有任何元素阻挡3. 要求F元素一定是在E元素的下面 */.box + p{color: #f00;text-decoration: underline;}    
/*        p + .box{color: #f00;text-decoration: underline;} */   </style>
</head>
<body><!-- class=box这个元素中有三个子元素第一个子元素：<h2>HTML</h2>第二个子元素：<div></div>还有子元素<h2>CSS</h2>第三个子元素：<h2>PHP</h2> --><p>我在上面</p><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div><p>我在下面</p></body>
</html>

在这里插入图片描述

伪类选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>伪类选择器</title><style type="text/css">/*使用伪类选择器来给超级链接的不同状态来设置样式*/a:link{color: #f00; /*正常状态  红色 未被访问过*/}a:visited{color: #000; /*黑色 已经访问过*/}a:hover{color: gold;}a:active{color: #0f0; /*绿色*/}</style>
</head>
<body><a href="http://www.baidu.com">baidu</a><a href="http://www.133.com">133</a><a href="http://www.134.com">134</a></body>
</html>

在这里插入图片描述

属性选择器

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>属性选择器</title><style type="text/css">/*通过属性选择器来匹配元素*//*第一个：[属性名]*//*先匹配p标签，再找有align属性的*/
/*        p[align]{color: #f00;}*//*第二个：[属性名=值]*/
/*        [align = center]{color: #00f;}*//*第三个：[属性^=值]*//*有颜色属性的font标签的样式*/
/*        font[color]{border: 1px solid #00f;} */   /*有颜色属性值为#FF开头的font标签的样式*/
/*        font[color^="#FF"]{border: 1px solid #00f;} */ /*第四个：[属性$=值]*//*先找font标签，然后找color以00结尾的*/font[color$="00"]{border: 1px solid #00f;}/*第五个：[属性*=值]*//*先找font标签，再匹配color中含有aa的，不区分大小写*/font[color*="aa"]{border: 1px solid #00f;}       </style>
</head><body><p align="center">哈哈1</p><h2 align="center">哈哈2</h2><p align="left">哈哈3</p><font color="#FF0000">颜色</font><font color="#FFAA00">颜色</font><font color="#FFaa00">颜色</font><font color="#aacc00">颜色</font><font color="#FFaadd">颜色</font><font color="#ddaabb">颜色</font>
</body>
</html>

在这里插入图片描述

列表样式属性

这里的列表指的事：无序列表和有序列表
因为整个网页布局中无序列表使用最多。list-style-type:设置列表前项目符号的类型对应的值：none    将列表前面的项目符号去掉disc    实心圆square  实心小方块circle  空心圆
list-style-position:设置列表项标记的放置位置对应的值：inside  在里面outside 在外面
list-style-image:将图像设置为列表项标记对应的值：url   图像路径
list-style:在一个声明中设置所有列表的属性对应的值：squareinsideurllist-style，这个属性是一个简写属性，它集成上面上那个属性的功能。可以同时设置上面的三个属性。每一个属性值之前使用空格分隔！它的属性值可以有一个也可以有两个也可以三个。其属性值个数不定，位置也不定！

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表样式属性</title><style type="text/css">/*后代元素选择器*/.box ul{/*去除列表前面的项目符号*//*list-style-type: none; *//*实心方块*//*list-style-type: square;*//*空心圆*//*list-style-type: circle;*/}.box ul li{border: 1px solid #f00;height: 35px;line-height: 35px;/*list-style-position: inside;*//*第一步：将列表前面的项目符号去除*/
/*            list-style-type: none;将列表前面的符号换成一张图片list-style-image: url(../img/list-img.jpg);*/list-style: none url(../img/list-img.jpg);}</style></head>
<body><div class="box"><h2>中国四大名著</h2><ul><li>红楼梦</li><li>三国演义</li><li>水浒传</li><li>西游记</li></ul></div></body>
</html>

在这里插入图片描述
列表样式案例

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>列表样式属性案例</title><style type="text/css">/*第一步：需要给div设置一个边距，并且这个div在浏览器上面是居中显示*/.box{width: 500px;border: 1px solid #f00;/*外边距：HTML中的表格标记属性 cellspacing单元格与单元格之间的距离在CSS中盒子与盒子之间的距离也称为外边距margin*/margin-left: auto; margin-right: auto;}.box h1{border: 1px solid skyblue;height: 40pxwidth: 40px;}.box li{/*color: #00f;*/list-style-type: none;list-style-image: url(../img/list-img.jpg);line-height: 30px;border: 1px solid #ccc;}</style>
</head>
<body><div class="box"><h1>频道推荐</h1><ul><li><a href="https://www.baidu.com/link?url=d9k7wwXsSM3GpAgfX296enlb_IfRmHqrNBIZv720wI2WdL_hXCPFUrgnjaMvt6Q31ljWo0gnwi-_nj40UB4unefkPy4Te-Fa3B0xyLZSIxy&wd=&eqid=e059485000084593000000046661f6db">胖东来董事长自曝患胃癌</a></li><li><a href="https://news.cyol.com/gb/articles/2024-06/06/content_Bb8x9VSlYQ.html">准备好了就去战斗吧!高考必胜</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801120989685528101&wfr=spider&for=pc">2024高考作文预测</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801092274605444416&wfr=spider&for=pc">餐厅倒闭老板留下6只企鹅跑路</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801104923301331265">扫码可领3000元财政部补贴?假</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801082241586470739&wfr=spider&for=pc">学校为高三学子准备定胜“糕粽”</a></li><li><a href="https://www.peopleapp.com/column/30045222587-500005470568">人民日报:国足平局难以接受</a></li><li><a href="https://quanmin.baidu.com/sv?source=share-h5&pd=qm_share_search&vid=3938713301581804879">高考期间最累的人其实是张韶涵</a></li></ul></div></body>
</html>

在这里插入图片描述

对超级链接进行美化

通常会去掉超级链接的下划线，同时给超级链接设置颜色。
一般情况下：
正常状态与访问过后的状态的样式设置为一致。
当鼠标经过时给其设置另外一种颜色。激活状态一般不设置，因为激活状态的时间太短。

举例：a:link,a:visited {去掉超级链接的下划线;设置一个颜色;}a:hover {设置另外一个颜色;增加一张下划线;}演示：
/*对超级链接进行美化*/
/*正常状态与访问过后的状态*/
a:link,a:visited {
text-decoration:none;color:#444;
}
/*鼠标放上状态*/
a:hover {
color: #fdle;
text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>对超级链接进行美化</title><style type="text/css">/*对超链接进行美化*//*正常状态和访问过后的状态*/a:link,a:visited {/*去除下划线，设置颜色*/text-decoration: none;color: #444;}/*鼠标放上的状态*/a:hover{color: #f00;text-decoration: underline; /*加下划线*/}</style>
</head>
<body><div class="box"><h1>频道推荐</h1><ul><li><a href="https://www.baidu.com/link?url=d9k7wwXsSM3GpAgfX296enlb_IfRmHqrNBIZv720wI2WdL_hXCPFUrgnjaMvt6Q31ljWo0gnwi-_nj40UB4unefkPy4Te-Fa3B0xyLZSIxy&wd=&eqid=e059485000084593000000046661f6db">胖东来董事长自曝患胃癌</a></li><li><a href="https://news.cyol.com/gb/articles/2024-06/06/content_Bb8x9VSlYQ.html">准备好了就去战斗吧!高考必胜</a></li><li><a href="https://quanmin.baidu.com/sv?source=share-h5&pd=qm_share_search&vid=4582484021341585237">北大物理保送生考了唯一一门语文</a></li><li><a href="https://baijiahao.baidu.com/s?id=1801287722624806661&wfr=spider&for=pc">今年又帮李华了</a></li></ul></div></body>
</html>

在这里插入图片描述

CSS|04 复合选择器伪类选择器属性选择器美化超链接

基本选择器：见上篇基本选择器复合选择器选择器1,选择器2{属性:值;} 多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔举例： p,h1,h2{margin:0px;}E F{属性:值;} 后代元素选择器，匹配所有属于E元素后…...

编程日记 2024/7/1 19:26:57

探索Batch注释的奥秘：REM与::的细微差别

探索Batch注释的奥秘：REM与::的细微差别在编写Batch文件时，注释是必不可少的部分，它们帮助我们理解代码的意图和逻辑。Batch脚本提供了两种添加注释的方法：REM命令和双冒号::。虽然它们功能相似，但在使用上存在一些细…...

编程日记 2024/7/1 19:24:55

C语言求数列 S(n) = a + aa + aaa + …aa…a (n 个 a)的和

求数列S(n)aaaaaa…aa…a(n个a)之值，其中a是一个数字，n表示a的位数，n由键盘输入。例如222222222222222（此时n5） 这个程序读取用户输入的一个数字 a 和一个正整数 n，计算并输出数列 S(n) 的值。 #include …...

编程日记 2024/7/1 19:20:50

MysqlDump

介绍：mysqldump是一个常用的命令行工具，它用于备份或导出MySQL或MariaDB数据库中的数据。这个工具可以创建一个SQL文件，其中包含数据库的结构和数据，这样就可以在其他MySQL服务器上重新创建数据库或进行数据迁移。基本语法&#…...

编程日记 2024/7/1 19:16:46

某安全公司DDoS攻击防御2024年6月报告

引言： 在2024年6月，网络空间的安全挑战汹涌澎湃。分布式拒绝服务（DDoS）攻击频发，针对云服务、金融科技及在线教育平台的精密打击凸显出当前网络威胁环境的严峻性。某安全公司作为网络安全防护的中坚力量&#xff0c…...

编程日记 2024/7/1 19:14:44

Centos下rpm和yum执行卡住问题（已解决）

问题描述执行rpm和yum卡住， 没有任何报错信息，且无法 ctrl c 终止，只能通过后台 kill -9 杀死。问题排查： 查看yum日志：yum -vv 软件包会发现卡在 loading keyring from rpmdb，即load DB存在问题。 …...

编程日记 2024/7/1 19:12:41

python自动化办公之PyPDF2.errors.DeprecationError

背景：pypdf2库在不断更新换代里面的类，逐渐淘汰一些旧的类 PyPDF2.errors.DeprecationError的意思是我们代码里用到的类计划被淘汰了，系统不推荐使用，解决办法：根据提示use xxx instead使用xxx 替换之前的类例子1 P…...

编程日记 2024/7/1 19:11:39

[leetcode]first-unique-character-in-a-string 字符串中的第一个唯一字符

. - 力扣（LeetCode） class Solution { public:int firstUniqChar(string s) {unordered_map<int, int> frequency;for (char ch: s) {frequency[ch];}for (int i 0; i < s.size(); i) {if (frequency[s[i]] 1) {return i;}}return -1;} };...

编程日记 2024/7/1 19:09:37

使用uniapp.pageScrollTo方法进行页面滚动

先看看是不是你想要的： 需求： 有个填写数据的单子在提交的时候，会对必填项做校验，如果必填项没有数据的话，必填项校验生效给出提示，并且页面滚动到第一个需要填写数据的地方。开发： 因为这个…...

编程日记 2024/7/1 19:08:36

寒武纪实现高维向量的softmax进阶优化和库函数对比

关于寒武纪编程可以参考本人之前的文章添加链接描述，添加链接描述，添加链接描述实验证明，axis=0和axis=-1的时候，手写softmax速度可以和库函数媲美，甚至于更甚一筹。 src/softmax.mlu #include <bang.h> #include...

编程日记 2024/7/1 19:07:34

我的世界服务器-高版本服务器-MC服务器-生存服务器-RPG服务器-幻世星辰

生存为主，RPG乐趣为辅，重视每位玩家的建议，一起打造心目中的服务器，与小伙伴一起探险我的世界！ 服务器版本: 1.18.2 ~ 1.20.4 Q群： 338238381 服务器官网: 星辰毛毛雨-Minecraft高版本生存服务器我的世界…...

编程日记 2024/7/1 19:06:33

倒装COB显示屏与传统SMD显示屏安装方式有哪些不同？

COB显示屏与传统SMD显示屏是商业显示领域中非常重要的两种载体，在前面的文章当中我们为大家阐述了倒装COB显示屏的技术特点，今天跟随COB显示屏厂家深圳市中品瑞科技一起来看看，COB显示屏的安装与传统LED显示屏的安装有哪些不同？ 一…...

编程日记 2024/7/1 19:05:31

elasticsearch重置密码

0 案例背景 Elasticsearch三台集群环境，对外端口为6200，忘记elasticsearch密码，进行重置操作注：若无特殊说明，三台服务器均需进行处理操作 1 停止es /rpa/bin/elasticsearch.sh stop 检查状态 ps -ef|grep elast…...

编程日记 2024/7/1 19:04:30

微信小程序写一个可以滚动虚拟列表（瀑布流），减少dom渲染的优化，解决内存问题。

为什么要写这个？ 因为在写小程序的时候首页功能比较多，造成渲染的dom有很多，一直setdata跳转到其他页面或者一直滑动就会卡顿，白屏。官方文档上那个不适用于瀑布流。官方文档理解刚开始在写这个的时候，就在想微信…...

编程日记 2024/7/1 19:03:29

人工与智能系统之间的交互方式

人工与智能系统之间的交互方式 #mermaid-svg-xSsFZWak2bsyV0un {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xSsFZWak2bsyV0un .error-icon{fill:#552222;}#mermaid-svg-xSsFZWak2bsyV0un .error-text{fill:#5522…...

编程日记 2024/7/1 19:02:28

【运维】如何在Ubuntu中设置一个内存守护进程来确保内存不会溢出

文章目录前言增加守护进程1. 编写监控脚本2. 创建 systemd 服务文件3. 启动并启用服务4. 验证服务是否运行注意事项如何修改守护进程1. 修改监控脚本2. 重新加载并重启服务3. 验证服务是否运行总结如何设置一个日志文件来查看信息1. 修改监控脚本以记录日志方法一&#xff1…...

编程日记 2024/7/1 19:00:26

调用基类的纯虚函数，如何知道纯虚函数会调用哪个派生类（子类）中的实现。

在 C 中，调用基类的纯虚函数实际上是通过运行时多态性来决定调用哪一个派生类的实现。这种机制是通过虚函数表（vtable）和虚函数指针（vptr）实现的。下面我们来详细探讨一下这个过程。虚函数表和虚函数指针虚函数表&a…...

编程日记 2024/7/1 18:59:25

塑造卓越企业家IP：多维度视角下的策略解析

在构建和塑造企业家IP的过程中，我们需要从多个维度进行考量，以确保个人品牌能够全面、立体地展现企业家的独特魅力和价值。以下是从不同角度探讨如何做好一个企业家IP的策略。一、从个人特质出发深入了解自我：企业家需要清晰地认识到自己的…...

编程日记 2024/7/1 18:57:23

Rust 跨平台-Android 和鸿蒙 OS

1. 安装 rustup rustup 是 Rust 的安装和版本管理工具 $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh 该命令会安装 rusup 和最新的稳定版本的 Rust；包括： rustc Rust 编译器，用于将 Rust 代码编译成可执行文件或库。 ca…...

编程日记 2024/7/1 18:56:22

Typora导出为Word

文章目录一、场景二、安装1、网址2、解压并验证三、配置四、重启Typora 一、场景在使用Typora软件编辑文档时，我们可能需要将其导出为Word格式文件当然我们可以直接在菜单里进行导出操作文件-> 导出-> Word(.docx) 如果是第一次导出word文件&#xff0…...

编程日记 2024/7/1 18:55:20

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2025/10/28 12:40:10

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

定时器任务——若依源码分析

分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...

编程新知 2025/10/19 9:46:38

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/10/30 22:13:49

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

编程新知 2025/11/3 0:40:01

七、数据库的完整性

七、数据库的完整性主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述数据库完整性的含义正确性指数据的合法性有效性指数据是否属于所定…...

编程新知 2025/10/27 5:02:19

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。本文主要介绍JXcore的打包功能。 JXcore 安装下载JXcore安装包&a…...

编程新知 2025/10/18 16:24:53

6.9本日总结

一、英语复习默写list11list18，订正07年第3篇阅读二、数学学习线代第一讲，写15讲课后题三、408 学习计组第二章，写计组习题四、总结明天结束线代第一章和计组第二章五、明日计划英语：复习l默写sit12list17&#…...

编程新知 2025/10/19 19:39:57

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器？ 1.迭代器…...

编程新知 2025/10/2 23:42:13

day51 python CBAM注意力

目录一、CBAM 模块简介二、CBAM 模块的实现 （一）通道注意力模块 （二）空间注意力模块 （三）CBAM 模块的组合三、CBAM 模块的特性四、CBAM 模块在 CNN 中的应用一、CBAM 模块简介在之前的探索中…...

编程新知 2025/9/24 3:13:03

复合选择器

多元素选择器

后代元素选择器

子元素选择器

相邻元素选择器

伪类选择器

属性选择器

列表样式属性

对超级链接进行美化

相关文章：