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

CSS 选择器与相关规则详解

CSS(Cascading Style Sheets)的选择器是网页样式设计中至关重要的工具,它们允许开发者精确地定位并应用样式到HTML文档中的元素。下面将逐一介绍几种主要的选择器类型,以及相关的注释和@规则。

1. 类选择器 (Class Selector)

类选择器通过.后跟类名来定义样式,可以应用于多个具有相同类名的元素上:

/* 定义一个名为 "highlight" 的类 */
.highlight {background-color: yellow;
}<!-- 在HTML中使用 -->
<p class="highlight">这段文本将会高亮显示</p>
<div class="highlight">此div也会有相同的背景色</div>

2. ID 选择器 (ID Selector)

ID选择器使用#符号后面紧跟ID名称来指定唯一的元素,每个页面的ID应保证唯一性:

/* 定义一个ID为 "main-header" 的样式 */
#main-header {font-size: 24px;color: #333;
}<!-- 在HTML中使用 -->
<h1 id="main-header">主标题</h1>

3. 伪类选择器 (Pseudo-class Selector)

伪类选择器用于向某些特定状态的元素添加样式,如链接的不同状态:

/* 鼠标悬停时链接的颜色变化 */
a:hover {color: red;
}/* 已访问过的链接颜色 */
a:visited {color: purple;
}

4. 属性选择器 (Attribute Selector)

属性选择器根据HTML元素的属性及其值来选择元素:

/* 选择所有带有href属性的a元素 */
a[href] {text-decoration: underline;
}/* 选择src属性值以".jpg"结尾的img元素 */
img[src$=".jpg"] {border: 1px solid black;
}

5. 伪元素选择器 (Pseudo-element Selector)

伪元素选择器用于选择元素内容的一部分,而不是整个元素本身:

/* 选择每个段落的第一个字母作为伪元素,并设置样式 */
p::first-letter {font-size: larger;text-transform: uppercase;
}/* 创建一个在元素内容之前插入的内容块 */
p::before {content: "Read: ";color: green;
}

6. 后代选择器 (Descendant Selector)

后代选择器用来选择某个元素内部的所有特定后代元素:

/* 选择所有位于ul标签内的li元素 */
ul > li {list-style-type: disc;
}/* 选择任何在div内包含的所有段落 */
div p {margin-bottom: 1em;
}

7. 相邻后代选择器、子选择器 (Child Selector)

子选择器 (> 符号) 指定父元素直接子元素的样式:

/* 只选择直接位于.navbar下的 a 元素 */
.navbar > a {color: white;
}/* 注意:相邻后代选择器实际上指的是相邻兄弟选择器,在这里纠正一下 */
/* 相邻兄弟选择器 (+ 符号) 选择紧随其后的同级元素 */
.h1 + p {margin-top: 0;
}

8. 兄弟选择器 (Sibling Selector)

  • 相邻兄弟选择器 (+ 符号) 选择紧接在某个元素之后的同级元素:
/* 当p元素紧跟在一个h1元素后面时应用样式 */
h1 + p {font-weight: bold;
}/* 一般兄弟选择器 (~ 符号) 选择所有紧跟在同一父元素下某元素之后的同级元素 */
h1 ~ p {color: blue;
}

注释 (Comments)

CSS注释用于解释或临时禁用代码块:

/* 这是一个CSS注释,不会影响样式渲染 */
/* .example-selector {display: none; // 这行样式被注释掉了
} */

@规则 (@ Rules)

  • @media 规则用于创建媒体查询,针对不同设备视口尺寸和特性应用不同的样式:
@media screen and (max-width: 600px) {body {font-size: 14px;}
}
  • @font-face 规则用于定义自定义字体:
@font-face {font-family: 'MyCustomFont';src: url('myfont.woff2') format('woff2'),url('myfont.woff') format('woff');font-weight: normal;font-style: normal;
}body {font-family: 'MyCustomFont', sans-serif;
}
  • @page 规则用于定义打印样式表中的页面布局:
@page {size: A4;margin: 1in;
}

以上仅列举了部分常见的CSS选择器和@规则,实际开发中还有其他许多复杂且强大的组合方式,可根据需要灵活运用。

相关文章:

CSS 选择器与相关规则详解

CSS&#xff08;Cascading Style Sheets&#xff09;的选择器是网页样式设计中至关重要的工具&#xff0c;它们允许开发者精确地定位并应用样式到HTML文档中的元素。下面将逐一介绍几种主要的选择器类型&#xff0c;以及相关的注释和规则。 1. 类选择器 (Class Selector) 类选…...

基于springboot的宠物店系统的设计与实现

文章目录 项目介绍主要功能截图&#xff1a;部分代码展示设计总结项目获取方式 &#x1f345; 作者主页&#xff1a;超级无敌暴龙战士塔塔开 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &…...

Llama2大模型开源,大模型的Android时代来了?

就昨天凌晨,微软和Meta宣布Llama2大模型开源且进一步放开商用,一下朋友圈刷屏。要知道,开源界最强大的模型就是过去Meta开源的Llama,而现在Llama2更强大,又开放商用,更有微软大模型霸主企业撑腰(微软既投资大模型界的IOS——ChatGPT,又联合发布大模型的Android——Llam…...

取出list中指定数量数据操作,操作完了删除这些数据

直接看代码吧,有注释 package com.ep.crm.task;import java.util.ArrayList; import java.util.List; import java.util.Random;public class Test {public static void main(String[] args) {List<String> list new ArrayList<String>();// 生成随机整数Random …...

Cocos XR的WebBox实现流程

1. 正常3D场景下的webview 1.1 组件角色 Cocos Creator正常3D场景下只有在UI组件才支持webview&#xff0c;即作为下图中的UI Nodes(Canvas Node)的子节点&#xff0c;和3D组件是隔离开的&#xff0c;不能显示在3D空间中&#xff0c;UI Nodes(Canvas Node)是一个平面内的矩形…...

netstat是一个常用的网络工具,用于显示和分析网络连接、路由表以及网络接口等信息。

netstat 是一个常用的网络工具&#xff0c;用于显示和分析网络连接、路由表以及网络接口等信息。 它可以提供关于网络活动的实时统计数据&#xff0c;包括正在监听的端口、已建立的连接、网络接口的状态等。 使用 netstat 命令可以列出当前系统中的网络连接情况。以下是一些常…...

【Linux】linux权限

linux权限 一&#xff0c;Linux权限的概念二&#xff0c;Linux权限管理1.文件访问者分类2.文件类型和访问权限3.文件权限值的表示方法4.文件访问权限的设置 三&#xff0c;目录的权限四&#xff0c;粘滞位五&#xff0c;权限掩码1.什么是权限掩码2.权限掩码的计算 一&#xff0…...

XUbuntu22.04之如何创建、切换多个工作区(二百零九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

网络安全之SSL证书加密

简介 SSL证书是一种数字证书&#xff0c;遵守SSL协议&#xff0c;由受信任的数字证书颁发机构&#xff08;CA&#xff09;验证服务器身份后颁发。它具有服务器身份验证和数据传输加密的功能&#xff0c;能够确保数据在传输过程中的安全性和完整性。 具体来说&#xff0c;SSL证…...

格式化日期注解@JsonFormat的使用和TimeZone时区问题

JsonFormat的使用 目的 为了便于date类型字段的序列化和反序列化&#xff0c;需要在数据结构的Date、Timestamp、DateTime类型的字段上用JsonFormat注解进行注解 使用 JsonFormat注解是一个时间格式化注解&#xff0c;比如我们存储在mysql中的数据是date类型的&#xff0c;当…...

ReactNative实现文本渐变

我们直接上图,可以看到上面文本的效果,使用SVG实现 1.首先还是要引入react-native-svg库 2.使用该库下面的LinearGradient和Text 好,话不多说,我们看具体代码 <Svg width={422} height={30} viewBox={0 0 422 30}><Defs><LinearGradientid="Gradien…...

深度学习手写字符识别:训练模型

说明 本篇博客主要是跟着B站中国计量大学杨老师的视频实战深度学习手写字符识别。 第一个深度学习实例手写字符识别 深度学习环境配置 可以参考下篇博客&#xff0c;网上也有很多教程&#xff0c;很容易搭建好深度学习的环境。 Windows11搭建GPU版本PyTorch环境详细过程 数…...

Day 1. 学习linux高级编程之Shell命令和IO

1.C语言基础 现阶段学习安排 2.IO编程 多任务编程&#xff08;进程、线程&#xff09; 网络编程 数据库编程 3.数据结构 linux软件编程 1.linux&#xff1a; 操作系统&#xff1a;linux其实是操作系统的内核 系统调用&#xff1a;linux内核的函数接口 操作流程&#xff…...

STM32--SPI通信协议(1)SPI基础知识总结

前言 I2C (Inter-Integrated Circuit)和SPI (Serial Peripheral Interface)是两种常见的串行通信协议&#xff0c;用于连接集成电路芯片之间的通信&#xff0c;选择I2C或SPI取决于具体的应用需求。如果需要较高的传输速度和简单的接口&#xff0c;可以选择SPI。如果需要连接多…...

Debezium系列之:MariaDB10.5以上版本赋予数据库账号读取binlog权限的变化

Debezium系列之:MariaDB10.5以上版本赋予数据库账号读取binlog权限的变化 一、背景二、BINLOG MONITOR权限三、BINLOG MONITOR和REPLICA MONITOR的区别四、MariaDB版本升级的影响五、总结一、背景 数据接入会检测账号是否具有REPLICATION SLAVE、REPLICATION CLIENT的权限Mari…...

迅为STM32MP157开发板底板板载4G接口(选配)、千兆以太网、WIFI蓝牙模块

底板扩展接口丰富 底板板载4G接口(选配)、千兆以太网、WIFI蓝牙模块HDMI、CAN、RS485、LVDS接口、温湿度传感器(选配)光环境传感器、六轴传感器、2路USB OTG、3路串口CAMERA接口、ADC电位器、SPDIF、SDIO接口等。 支持多种显示屏 迅为在MP157开发板支持了多种屏幕&#xff0…...

「实用分享」用界面组件Telerik UI for Blazor增强你的财务图表!

Telerik UI for Blazor拥有110个原生的、易于定制的Blazor UI组件和高性能网格组件&#xff0c;能节约一半的时间开发全新的Blazor应用程序并使传统web项目现代化&#xff0c;其中囊括了设计和生成工具等。Telerik UI for Blazor控件提供的控件&#xff0c;可轻松满足应用程序对…...

使用org.openscada.utgard java opcda库做opc客户端时长期运行存在的若干问题

牛11月09日反馈东区存在以下问题&#xff0c;由于在现场未来得及处理。11月10日反馈西区亦存在此问题。经排查此问题已存在相当长一段时间&#xff08;最长为9月底即存在&#xff09;。 1、读报错Value: [[org.jinterop.dcom.core.VariantBody$EMPTY212c0aff]], Timestamp: Mo…...

杰克与魔法树的冒险

从前有一个小村庄&#xff0c;里面住着一个善良勇敢的小男孩叫杰克。杰克非常喜欢冒险和探索未知的事物。 一天&#xff0c;杰克听说村庄附近的森林里有一个神奇的魔法树&#xff0c;树上结满了金色的苹果。他决定去寻找这棵魔法树&#xff0c;并带回一些金苹果给村庄的居民们。…...

第九节HarmonyOS 常用基础组件22-Marquee

1、描述 跑马灯组件&#xff0c;用于滚动展示一段单行文本&#xff0c;仅当文本内容宽度超过跑马灯组件宽度时滚动。 2、接口 Marquee(value:{start:boolean, step?:number, loop?:number, fromStart?: boolean ,src:string}) 3、参数 参数名 参数类型 必填 描述 st…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...