前端开发:CSS(2)—— 选择器

前面我们初步学习了CSS,对其有了基本的认识。下面我们来具体学习CSS中的选择器。

目录

选择器的种类

1.基础选择器

(1)标签选择器

(2)类选择器

(3)id选择器

(4)通配符选择器

2.复合选择器

3.伪类选择器


选择器的种类

以下内容为CSS2标准中支持的选择器。

1.基础选择器

基础选择器都是由单个选择器构成的。包括:标签选择器、类选择器、id选择器和通配符选择器。

(1)标签选择器

上一节文章我们修改了段落标签p的样式。而我们在CSS文件中书写的选择器就为标签选择器。它只会修改对应标签的样式,而不会修改其他标签的样式。

p {color:red;font-size:40px;
}

(2)类选择器

类似于标签选择器,我们在标签中添加一个class类属性,类选择器中修改的样式会作用在带指定类的标签上。

类选择器要在前面加一个 .

例如,我们用三个段落标签,并给不同的类:

<body><p class="cat">猫</p><p class="dog">狗</p><p class="rabbit">兔</p><p class="bird">鸟</p>
</body>

在给出不同的类选择器:

.cat {color:black;font-size:20px;
}.dog {color:darkgrey;font-size:30px;
}.rabbit {color: white;font-size:10px; 
}.bird {color:green;font-size: 5px;
}

最后运行可以看到四个段落文字有不同的效果。

(3)id选择器

同上,在标签中添加id属性,并类似地在CSS中使用id选择器。id选择器需要再前面加一个#;这里就省略了。

(4)通配符选择器

选取*的定义,选择所有的标签。通配符选择器在实际开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距。例如:

* {background-color: bisque;
}

这时我们运行会发现整个网站的背景都变为了我们修改的颜色。并且优先级更高。如果我们单独修改某一段的标签样式,则无法修改成功。 

2.复合选择器

复合选择器其实就是多个基础选择器相互结合。具体实现我们就不再探讨。

3.伪类选择器

最后我们来学习一下伪类选择器。它一般用来定义元素状态,可以用于选择处于特定**状态**或满足特定**条件**的元素,这些状态无法通过常规选择器直接定位。它们以冒号 `:` 开头,附加在基础选择器之后。

下面列举几种常见用法:

1.:hover  鼠标悬停时

a:hover { color: red; } /* 鼠标悬停时链接变红 */

2.:active  元素被激活(如单击时)

button:active { background: blue; } /* 按钮按下时背景变蓝 */

3.:focus  元素获得焦点(如输入框被选中)

input:focus { border-color: green; } /* 输入框聚焦时边框变绿 */

4.:link  未访问的链接

a:link { color: purple; }

5.:visited  已访问的链接

a:visited { color: gray; }

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

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

相关文章

人工智能2.0时代的人才培养和通识教育

目录引言&#xff1a;从"机器模仿"到"智能协同"的时代跨越一、人工智能2.0的技术演进&#xff1a;从规则到大模型的三次跃迁1. 人工智能0.0&#xff08;1956-2006&#xff09;&#xff1a;规则驱动的"专家系统时代"2. 人工智能1.0&#xff08;20…

管理索引常用的API

二.管理索引常用的API 1.查看现有索引信息 查看所有索引信息列表&#xff1a;curl -X GET http://elk101.k8s.com:9200/_cat/indices?v查看某个索引的详细信息:curl -x GET http://elk101.k8s.com:9200/linux-2020-10-2温馨提示: (1)"?v"表示输出表头信息&#xff…

当文档包含表格时,如何结合大模型和OCR提取数据?

在AI应用极速发展的当下&#xff0c;LLM&#xff08;大语言模型&#xff09;与RAG&#xff08;检索增强生成&#xff09;系统已成为构建智能问答、知识管理等高阶应用的核心引擎。 然而&#xff0c;许多团队在项目落地时遭遇了现实的挑战&#xff1a;模型的实际表现——无论是回…

机器学习工程化 3.0:从“实验科学”到“持续交付”的 7 个关卡

一、背景&#xff1a;为什么 90% 的 ML 项目死在了实验台&#xff1f; Gartner 2024 报告显示&#xff0c;87% 的企业机器学习项目未能走出实验室。原因并非算法落后&#xff0c;而是缺少“工程化骨骼”&#xff1a;数据漂移无人发现&#xff0c;模型上线一周就失效&#xff1b…

BGP笔记整理

一、BGP 基础概念1. 产生背景BGP&#xff08;Border Gateway Protocol&#xff09;是自治系统&#xff08;AS&#xff09;间的动态路由协议&#xff0c;属于外部网关协议&#xff08;EGP&#xff09;&#xff0c;用于在不同 AS 之间传递路由信息。2. 自治系统&#xff08;AS&am…

Mysql-MVCC机制

1. MVCC机制详解 在Read Uncommitted级别下&#xff0c;事务总是读取到最新的数据&#xff0c;因此根本用不到历史版本&#xff0c;所以MVCC不在该级别下工作。 在Serializable级别下&#xff0c;事务总是顺序执行。写会加写锁&#xff0c;读会加读锁&#xff0c;完全用不到MVC…

MySQL面试题及详细答案 155道(061-080)

《前后端面试题》专栏集合了前后端各个知识模块的面试题&#xff0c;包括html&#xff0c;javascript&#xff0c;css&#xff0c;vue&#xff0c;react&#xff0c;java&#xff0c;Openlayers&#xff0c;leaflet&#xff0c;cesium&#xff0c;mapboxGL&#xff0c;threejs&…

大数据中需要知道的监控页面端口号都有哪些

以下是一些大数据中常见组件监控页面的端口号&#xff1a;1. Hadoop&#xff1a;HDFS Web UI在Hadoop2.x版本中默认端口为50070&#xff0c;在Hadoop3.x版本中为9870&#xff0c;用于查看集群文件及目录&#xff1b;YARN Web UI端口为8088&#xff0c;可查看MR执行情况&…

时隔六年!OpenAI 首发 GPT-OSS 120B / 20B 开源模型:性能、安全与授权细节全解

为什么这次开放值得关注&#xff1f; OpenAI 时隔六年再次“放权重”&#xff0c;一次性公布 gpt-oss-120b 与 gpt-oss-20b 两个尺寸&#xff0c;并允许商业化二次开发 —— 采用 Apache 2.0 许可且可直接在 Hugging Face 下载(WIRED)。官方表示&#xff0c;开放旨在 降低门槛…

漏洞全讲解之中间件与框架漏洞(数字基础设施的“阿喀琉斯之踵“)

一、中间件漏洞的严峻现状根据Synopsys《2023年开源安全报告》显示&#xff1a;企业应用中平均包含158个中间件依赖高危漏洞年增长率达62%&#xff08;X-Force数据&#xff09;最危险漏洞&#xff1a;Log4j2&#xff08;CVE-2021-44228&#xff09;影响全球83%企业平均修复延迟…

Leetcode——菜鸟笔记2(移动0)

文章目录题目解题题目 解题 /*nums【0&#xff0c;1&#xff0c;0&#xff0c;3&#xff0c;2】numsSize5 nums【1.3.2.0.0】 1.找非零数&#xff0c;依次放在前面 2.剩下补0 */ void moveZeroes(int* nums, int numsSize) {int count0 0;int temp 0;for (int i 0; i < …

【LINUX网络】应用层自定义协议与序列化——通过实现一个简单的网络计算器来体会自定义协议

在了解了各种协议的使用以及简单的socket接口后&#xff0c;学会了“怎么传”的问题&#xff0c;现在来了解一下“传什么”的问题。 1. 序列化与反序列化 在前面的TCP、UDP的socket api 的接口, 在读写数据时, 都是按 "字符串" 的方式来发送接收的. 如果我们要传输一…

电脑一键重装系统win7/win10/win11无需U盘(无任何捆绑软件图文教程)

建议还是使用U盘进行重装系统&#xff0c;如果暂时还不会没有U盘&#xff0c;那就按照我这个来吧。 一&#xff0c;工具下载&#xff1a; 一键重装工具 密码:g5p3 二&#xff0c;镜像下载: 镜像站点&#xff1a;MSDN, 我告诉你 - 做一个安静的工具站 可以下载需要重装的系统…

深入探索Supervision库:Python中的AI视觉助手

深入探索Supervision库&#xff1a;Python中的AI视觉助手 在计算机视觉和机器学习领域&#xff0c;数据处理和结果可视化是项目成功的关键环节。今天我们将深入探讨一个强大的Python库——Supervision&#xff0c;它专为简化AI视觉项目的工作流程而设计。 什么是Supervision&am…

面向对象之类、继承和多态

系统是由汇总了数据和过程的“对象”组成的。在面向对象中&#xff0c;软件被定义为“类”&#xff0c;然后创建“实例”并运行。系统是通过“实例”之间的互相交换“消息”而运行的&#xff0c;但由于进行了“封装”&#xff0c;所以无法查看内部的详细内容&#xff0c;这被称…

传统防火墙与下一代防火墙

防火墙的发展过程第一种简单包过滤防火墙工作于&#xff1a;3、4层实现了对于IP、UDP、TCP信息的一些检查优点&#xff1a;速度快、性能高、可用硬件实现&#xff1b;兼容性较好检查IP、UDP、TCP信息缺点&#xff1a;安全性有限&#xff1a;仅能基于数据包的表面层面进行审查&a…

计算机视觉前言-----OpenCV库介绍与计算机视觉入门准备

前言&#xff1a;OpenCV库介绍与计算机视觉入门 OpenCV概述 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库&#xff0c;由Intel于1999年首次发布&#xff0c;现由非盈利组织OpenCV.org维护。它包含了超过2500种…

AI面试系统助手深度评测:6大主流工具对比分析

导语&#xff1a;秋招季&#xff0c;企业如何破局高效招聘&#xff1f;随着2024年秋招季临近&#xff0c;企业招聘压力陡增。据牛客调研数据显示&#xff0c;74.2%的求职者已接触过AI面试&#xff0c;89.2%的企业认为AI显著提升了筛选效率。然而&#xff0c;面对市场上琳琅满目…

浮雕软件Artcam安装包百度云网盘下载与安装指南

如你所知&#xff0c;ArtCAM是一款专业的CAD/CAM软件工具&#xff0c;主要用于三维浮雕设计、珠宝加工及CNC数控雕刻&#xff0c;可将二维构思快速转化为三维艺术产品&#xff0c;深受使用者的喜爱。一、主要应用领域‌工艺品与制造业‌&#xff1a;木工雕花、标牌制作、模具制…

六边形架构模式深度解析

在分布式系统设计领域&#xff0c;六边形架构&#xff08;Hexagonal Architecture&#xff0c;又称端口与适配器模式&#xff09;作为一种以领域为中心的架构模式&#xff0c;通过明确分离核心业务逻辑与外部交互&#xff0c;有效提升系统的可测试性、可扩展性与可维护性。本文…