【HTML】CSS样式(二)

上一篇我们学习了CSS基本样式和选择器,相信大家对于样式的使用有了初步认知。

本篇我们继续来学习CSS中的扩展选择器及CSS继承性,如何使用这些扩展选择器更好的帮助我们美化页面。

下一篇我们将会学习CSS中常用的属性。

喜欢的

【点赞】【关注】【收藏】

前言

1、组合选择器

2、包含选择器

3、交集选择器

4、伪类选择器

5、CSS继承性


前言

在实际工作过程中,我们通常使用基本的ID选择器,类选择器、标签选择器来实现我们的CSS样式,但某些情况下这些基本选择器并不是最优解,那么如何来让CSS实现更加灵活多变,就是我们今天要学习的内容:扩展选择器以及CSS继承性。

扩展选择器主要分为:

组合选择器、包含选择器、交集选择器、伪类选择器

1、组合选择器

顾名思义,就是将多种选择器进行组合,一般当某些标签需要使用同样的样式,而选择器又不同时使用。

语法:

<style>

        选择器1,选择器2,.....{

                属性:属性值;

        }

</style>

注意:多个选择器之间一定英文状态逗号隔开

示例:标签选择器、类选择器、id选择器组合使用

2、包含选择器

包含选择器也叫后代选择器,最外层的是父标签,依次往里是子标签。

语法:

<style>

        父标签 子标签 孙子标签....{

                属性:属性值;

        }

</style>

注意:多个选择器之间一定空格隔开

示例:

3、交集选择器

        由两个选择器之间的连接组成,结果是选中两个选择器各自的元素访问的交集,第一个必须是标签选择器,第二个必须是类或者ID选择器,并且两个选择器之间不能有空格或者逗号等隔开,必须是连续书写。

语法:

<style>

        标签名.类名{

                属性:属性值;

        }

        标签名#ID名{

                属性:属性值;

        }

</style>

示例:

4、伪类选择器

根据标签处于某种行为或状态时来修饰样式,一般用来对用户与文档交互时的行为做出响应。

语法:

标签名:伪类名{

        属性:属性值;

}

常见伪类: 

伪类含义应用场景
a:link未单击访问时的超链接样式常用,超链接主样式
a:visited单击访问后的超链接样式区分是否已被访问
a:hover鼠标悬浮在超链接上的样式常用,实现动态效果
a:active鼠标单击未释放的超链接样式少用,通常与link一致

示例:

5、CSS继承性

样式表的继承规则是:所有的标签中嵌套的元素都会继承外层指定的样式。

示例:

在这里插入图片描述

好了,就到这里吧,大家抓紧时间去学习吧😄
后续内容持续更新中,创作不易,
【点赞】【关注】【收藏】支持一下哦😘
祝各位看官万福金安😊


⭐️徒手摘星,爱而不得,世人万千,再难遇我。⭐️

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

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

相关文章

【数据结构与算法】探讨数据结构中的虚拟头节点

&#x1f331;博客主页&#xff1a;青竹雾色间 &#x1f331;系列专栏&#xff1a;数据结构与算法 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 &#x1f331;往期博客 深入浅出&#xff1a;单链表的实现和应用 目录 前言什么是虚拟头节点&#xff1f;虚…

深入浅出 -- 系统架构之分布式CAP理论和BASE理论

科技进步离不开理论支撑&#xff0c;而当下大行其道的分布式架构&#xff0c;透过繁荣昌盛表象&#xff0c;底层同样离不开诸多分布式理论撑持。当然&#xff0c;相信诸位在学习分布式相关技术时&#xff0c;必然学到过两个分布式领域中的基础理论&#xff0c;即&#xff1a;CA…

【蓝桥杯嵌入式】RTC——实时时钟

一、RTC简介 RTC RTC—real time clock&#xff0c;实时时钟&#xff0c;主要包含日历、闹钟和自动唤醒这三部分的功能&#xff0c;其中的日历功能我们使用的最多。日历包含两个32bit的时间寄存器&#xff0c;可直接输出时分秒&#xff0c;星期、月、日、年。 从Cubemx里的配置…

糟糕,Oracle归档满RMAN进不去,CPU98%了!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

Windows 11 中Docker的安装教程

选择正确的Docker版本 在Windows上&#xff0c;你可以安装两种类型的Docker&#xff1a;Docker Desktop和Docker Toolbox。Docker Desktop是针对Windows 10 Pro、Enterprise和Education版本的&#xff0c;这些版本内置了Hyper-V虚拟化支持。对于旧版本的Windows&#xff0c;比…

代码随想录算法训练营第三十一天| 理论基础、LeetCode 455.分发饼干、376. 摆动序列、53. 最大子序和

一、理论基础 文章讲解&#xff1a;https://programmercarl.com/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 1.贪心的定义 贪心的本质是选择每一阶段的局部最优解&#xff0c;从而达到全局最优解。例如&#xff0c;有一堆钞票&#xff0c…

什么是Ajax?怎么使用?

​ 文章目录 一、什么是Ajax二、全局刷新和局部刷新二、Ajax中使用XMLHttpRequest对象&#xff08;Ajax核心步骤&#xff09;1、创建异步对象2、给异步对象绑定事件3、异步对象的属性 readyState 表示异步对象请求的状态变化4、初始异步请求对象5、使用异步对象发送请求6、jso…

基于SpringBoot Vue汽车租赁系统

一、&#x1f4dd;功能介绍 基于SpringBoot Vue汽车租赁系统 角色&#xff1a;管理员、普通管理员、用户 管理员&#xff1a;管理员进入主页面&#xff0c;主要功能包括对系统首页、个人中心、用户管理、普通管理员管理、汽车类别管理、汽车信息管理、租车订单管理、取消订单管…

c#让不同的工厂生产不同的“鸭肉”

任务目标 实现对周黑鸭工厂的产品生产统一管理&#xff0c;主要产品包括鸭脖和鸭翅。武汉工厂能生生产鸭脖和鸭翅&#xff0c;南京工厂只能生产鸭翅&#xff0c;长沙工厂只能生产鸭脖。 分析任务 我们需要有武汉工厂、南京工厂、长沙工厂的类&#xff0c;类中需要实现生产鸭…

网络安全 | 什么是威胁情报?

关注WX&#xff1a;CodingTechWork 威胁情报 威胁情报-介绍 威胁情报也称为“网络威胁情报”(CTI)&#xff0c;是详细描述针对组织的网络安全威胁的数据。威胁情报可帮助安全团队更加积极主动地采取由数据驱动的有效措施&#xff0c;在网络攻击发生之前就将其消弭于无形。威…

09 flink-sql 中基于 mysql-cdc 的 select * from test_user 的具体实现

前言 这也是最近帮一个朋友看问题 遇到的一个问题 然后 引发了一下 对于 flink-sql 里面的一些 常规处理的思考, 理解 原始问题主要是 在测试库可以使用 flink-sql 可以正常同步, 但是 在生产环境 无法正常同步数据 这个问题 我们后面单独 记录一篇文章 测试用例 下载…

ChatGPT写作指南:制作精彩学术论文的关键

ChatGPT无限次数:点击直达 ChatGPT写作指南&#xff1a;制作精彩学术论文的关键 作为CSDN网站上拥有10年经验的专业原创文章优质创作者&#xff0c;我想分享一些关于如何利用ChatGPT制作精彩学术论文的关键要点。在本文中&#xff0c;我将介绍一些写作技巧和指南&#xff0c;以…

网络抓包专题

导航目录 HTTP 原理HTTPS 原理TLS 原理网络抓包原理一. 什么是抓包&#xff1f;二. 抓包的原理对HTTP请求进行抓包对HTTPS请求进行抓包 三. Android设备抓包问题Android6.0 及以下系统Android7.0 及以上系统方式一&#xff1a;方式二 HTTP 原理 HTTP 详解 点击跳转 HTTPS 原理…

【QT入门】 Qt代码创建布局综合运用:仿写腾讯会议登陆界面

往期回顾&#xff1a; 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局综合运用&#xff1a;仿写腾讯会议登陆界面 一、界面分…

Linux基础篇:文件系统介绍——根目录下文件夹含义与作用介绍

Linux文件系统介绍——文件夹含义与作用 Linux文件系统是一个组织和管理文件的层次结构。它包括了目录、子目录和文件&#xff0c;这些都是按照一定的规则和标准进行组织的。以下是Linux文件系统的一些关键组成部分&#xff1a; 1./bin&#xff1a; 该目录包含了系统启动和运…

数据结构中的堆

优先队列是队列数据结构实现&#xff0c;其中根据优先级处理对象&#xff0c;在优先队列中&#xff0c;添加的对象根据其优先级&#xff0c;默认情况下&#xff0c;优先级由对象的自然顺序决定的。队列构建时提供的比较器可以覆盖默认优先级。 优先队列就是一个堆&#xff0c;…

代码示例:OpenSSL AES CBC 加密

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 这是一个基于OpenSSL的AES-CBC…

Rust线程间通信通讯channel的理解和使用

Channel允许在Rust中创建一个消息传递渠道&#xff0c;它返回一个元组结构体&#xff0c;其中包含发送和接收端。发送端用于向通道发送数据&#xff0c;而接收端则用于从通道接收数据。不能使用可变变量的方式&#xff0c;线程外面修改了可变变量的值&#xff0c;线程里面是拿不…

C++设计模式:策略模式(二)

1、定义与动机 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换&#xff08;变化&#xff09;&#xff0c;该模式使得算法可独立于使用它的客户程序&#xff08;稳定&#xff09;而变化&#xff08;扩展&#xff0c;子类化&#xff09; 在软…

Hadoop-MapReduce

一、MapReduce 概述 1.1 MapReduce 定义 MapReduce 是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于 Hadoop 的数据分析应用”的核心框架。 MapReduce 核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在…