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

news2024/10/7 16:21:35

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

		复合选择器
            选择器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:在一个声明中设置所有列表的属性
    对应的值：
        square
        inside
        url
    list-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: 40px
            width: 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux实用命令练习

Linux实用命令练习

目录 一、常用命令 二、系统命令 三、用户和组 四、权限 五、文件相关命令 六、查找 七、正则表达式 八、输入输出重定向 九、进程控制 十、其他命令 1、远程文件复制&#xff1a;scp 2、locate查找 3、which命令 4、设置或显示环境变量&#xff1a;export 5、修…
阅读更多...
解决所有终端中文输出乱码的问题

解决所有终端中文输出乱码的问题

一、系统自带的cmd.exe 以及 Git的bash.exe、sh.exe、git-bash.exe和git-cmd.exe&#xff0c;和PowerShell默认使用“当前系统区域设置”设定好的936 (ANSI/OEM - 简体中文 GBK)语言编码。 1、[当前代码页] 的936 (ANSI/OEM - 简体中文 GBK) 是导致中文乱码的原因 在控制面板→…
阅读更多...
[分布式网络通讯框架]----Protobuf安装配置--附带每一步截图

[分布式网络通讯框架]----Protobuf安装配置--附带每一步截图

Protobuf Protobuf&#xff08;Protocol Buffers&#xff09;协议是一种由 Google 开发的二进制序列化格式和相关的技术&#xff0c;它用于高效地序列化和反序列化结构化数据&#xff0c;通常用于网络通信、数据存储等场景。 为什么要使用Protobuf Protobuf 在许多领域都得到…
阅读更多...
网上零食销售系统

网上零食销售系统

摘 要 随着互联网的快速发展&#xff0c;网上销售已成为零售业的重要组成部分。在众多的线上购物品类中&#xff0c;零食销售因其受众广泛、购买频率高、消费金额适中等特点&#xff0c;一直备受关注。然而&#xff0c;传统的零食销售方式&#xff0c;如实体店铺销售&#xff…
阅读更多...
web前端——css（一篇教会网页制作）

web前端——css（一篇教会网页制作）

目录 一、基本语法 1.行内样式表 2.内嵌样式表 3.外部样式表 二、选择器 1.标签选择器 2.类选择器 3.id 选择器 4.通配选择器 三、常见修饰 1.文本 2.背景 3.列表 4.伪类 5.透明度 6.块级、行级、行级块标签 7.div 和 span 四、盒子模型&#xff08;重点&…
阅读更多...
Reqable实战系列:Flutter移动应用抓包调试教程

Reqable实战系列:Flutter移动应用抓包调试教程

Flutter应用网络请求调试一直是业内难题&#xff0c;原因在于Dart语言标准库的网络请求不会走Wi-Fi代理&#xff0c;常规通过配置Wi-Fi代理来抓包的方式行不通。这给我们日常开发测试造成了很大的阻碍&#xff0c;严重降低工作效率。因此写一篇教程&#xff0c;讲解如何使用Req…
阅读更多...
vue的ESLint 4格缩进 笔记

vue的ESLint 4格缩进 笔记

https://chatgpt.com/share/738c8560-5271-45c4-9de0-511fad862109 一&#xff0c;代码4格缩进设置 .eslintrc.js文件 module.exports { "rules": { "indent": ["error", 4] } }; 自动修复命令 npx eslint --fix "src/**/*.{…
阅读更多...
ONLYOFFICE 8.1编辑器桌面应用程序来袭——在线全面测评

ONLYOFFICE 8.1编辑器桌面应用程序来袭——在线全面测评

目录 ✈下载✈ &#x1f440;界面&#x1f440; &#x1f44a;功能&#x1f44a; &#x1f9e0;幻灯片版式的重大改进&#x1f9e0; ✂无缝切换文档编辑、审阅和查看模式✂ &#x1f3b5;在演示文稿中播放视频和音频文件&#x1f3b5; &#x1f917;版本 8.1&#xff1a…
阅读更多...
CDGA数据治理：数字化时代的基石

CDGA数据治理：数字化时代的基石

随着数字化浪潮的汹涌而来&#xff0c;数据已成为当今世界的核心驱动力。无论是企业决策、市场趋势预测&#xff0c;还是个性化用户体验&#xff0c;都离不开数据的支撑。而在这一过程中&#xff0c;数据治理的重要性日益凸显&#xff0c;成为实现数字化转型、发挥数据价值的最…
阅读更多...
Django 如何使用视图动态输出 CSV 以及 PDF

Django 如何使用视图动态输出 CSV 以及 PDF

Django 如何使用视图动态输出 CSV 以及 PDF 这一篇我们需要用到 python 的 csv 和 reportLab 库&#xff0c;通过django视图来定义输出我们需要的 csv 或者 pdf 文件。 csv文件 打开我们的视图文件 testsite/members/views.py 。新增一个视图方法&#xff1a; import csv …
阅读更多...
Java反射获取--类对象(class对象)，3种方式

Java反射获取--类对象(class对象)，3种方式

Java反射获取–类对象(class对象)&#xff0c;3种方式 前言 内容节选个人oneNote个人笔记&#xff0c;分享Java反射获取--类对象(class对象)&#xff0c;3种方式
阅读更多...
mac 安装mysql启动报错 ERROR!The server quit without update PID file

mac 安装mysql启动报错 ERROR!The server quit without update PID file

发现问题&#xff1a; mac安装mysql初次启动报错&#xff1a; 一般出现这种问题&#xff0c;大多是文件夹权限&#xff0c;或者以前安装mysql卸载不干净导致。首先需要先确定问题出在哪&#xff1f;根据提示我们可以打开mysql的启动目录&#xff0c;查看启动日志。 问题解决&a…
阅读更多...
关键路径——C语言（理论）

关键路径——C语言（理论）

关键路径&#xff0c;是项目网络中从起始事件到终止事件的最长路径&#xff0c;决定了项目的最短完成时间。 关键路径中的任务没有任何可调整的余地&#xff0c;如果任何一个任务被延迟&#xff0c;整个项目的完成时间也会被延迟。 假设我们现在有一个图&#xff1a;把图的边…
阅读更多...
Android开发系列（十二）Jetpack Compose之BottomSheet

Android开发系列（十二）Jetpack Compose之BottomSheet

BottomSheet 是 Android 中一个常用的 UI 组件&#xff0c;它通常用于显示从屏幕底部弹出的用户界面。Jetpack Compose 是 Android 中的一个全新 UI 工具包&#xff0c;它提供了一种声明式的方式来构建用户界面。Jetpack Compose 中也有一个名为 BottomSheet 的组件&#xff0c…
阅读更多...
2、Redis持久化与高可用架构

2、Redis持久化与高可用架构

一、Redis 持久化 RDB 快照&#xff08;Snapshot&#xff09; 基本概念&#xff1a;RDB&#xff08;Redis DataBase&#xff09;快照是将 Redis 内存中的数据在某个时间点保存到磁盘中的一种持久化方式&#xff0c;默认保存到 dump.rdb 的二进制文件中。通过 RDB 快照&#xff…
阅读更多...
嵌入式 Linux 设备刷系统具体组成

嵌入式 Linux 设备刷系统具体组成

嵌入式 Linux 设备刷系统具体组成 1 介绍1.1 概述1.2 嵌入式 Linux 的组成1.3 U-Boot1.4 Linux 内核1.5 设备树1.6 根文件系统 参考 1 介绍 1.1 概述 一个完整的 linux 系统&#xff0c;通常包含了 U-Boot、kernel、设备树以及根文件系统。 1.2 嵌入式 Linux 的组成 1.3 U-…
阅读更多...
苹果电脑有什么好玩的游戏 Windows电脑上的游戏怎么在Mac电脑玩

苹果电脑有什么好玩的游戏 Windows电脑上的游戏怎么在Mac电脑玩

苹果电脑不仅在工作和生产领域备受推崇&#xff0c;其游戏领域也同样令人惊艳。从经典的策略游戏到刺激的竞技游戏&#xff0c;苹果平台上有着丰富多样的游戏选择&#xff0c;满足了不同玩家的喜好和需求。下面我们来看看苹果电脑有什么好玩的游戏&#xff0c;Windows电脑上的游…
阅读更多...
ET9中ETTask传递新的Context原理

ET9中ETTask传递新的Context原理

ET9中ETTask传递新的Context原理 前言 每一个异步函数都会创建两个对象&#xff0c; 第1个是当前异步函数返回值&#xff08;ETTASK&#xff09;对应的ETAsyncTaskMethodBuilder&#xff0c;通过这个类的静态方法Create创建返回&#xff0c;这个builder类中会有一个Task对象&…
阅读更多...
003GeoGebra如何无缝嵌入到PPT里

003GeoGebra如何无缝嵌入到PPT里

GeoGebra无缝嵌入到PPT里真是一个头疼的问题&#xff0c;已成功解决&#xff0c;这里记录一下&#xff0c;希望可以帮助到更多人。 注意&#xff0c;后续所有的文章说的PPT都是Offce Power Point, 不要拿着WPS的bug来问我哦&#xff0c;我已经戒WPS了&#xff08;此处表示无奈&…
阅读更多...
shell 脚本中断问题定位

shell 脚本中断问题定位

shell 脚本中断问题定位 1 介绍2 定位方法2.1 查看脚本的退出状态码2.2 查看系统日志文件2.3 使用journalctl工具2.4 使用dmesg命令2.5 检查脚本自身的日志记录2.6 使用图形界面工具2.7 配置和使用集中式日志管理系统 参考 1 介绍 shell 脚本运行&#xff0c;一段时间后&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023