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

2. CSS选择器与伪类

2.1 基本选择器回顾

在开始介绍CSS3选择器之前,我们先回顾一下CSS的基本选择器。这些选择器是所有CSS开发的基础。

2.1.1 元素选择器

元素选择器用于选中指定类型的HTML元素。

/* 选中所有的<p>元素 */
p {color: blue;
}

2.1.2 类选择器

类选择器用于选中拥有特定类名的元素。类选择器以句点(.)开头。

/* 选中所有类名为"example"的元素 */
.example {color: red;
}

2.1.3 ID选择器

ID选择器用于选中拥有特定ID的元素。ID选择器以井号(#)开头。

/* 选中ID为"header"的元素 */
#header {background-color: green;
}

2.1.4 后代选择器

后代选择器用于选中某个元素的所有后代元素。

/* 选中所有在<div>内的<p>元素 */
div p {color: purple;
}

2.1.5 组选择器

组选择器用于选中多个选择器对应的元素。

/* 选中所有的<h1>和<p>元素 */
h1, p {margin: 0;
}

2.2 CSS3新增选择器

CSS3引入了许多新选择器,使得选择元素更加精确和灵活。

2.2.1 属性选择器

属性选择器允许你根据元素的属性及其值来选中元素。

/* 选中所有属性包含"example"的元素 */
a[href*="example"] {color: red;
}/* 选中所有属性以"example"结尾的元素 */
a[href$="example"] {color: blue;
}/* 选中所有属性以"example"开头的元素 */
a[href^="example"] {color: green;
}

2.2.2 目标伪类选择器

:target 选择器用于选中当前活动的锚点目标。

/* 当链接目标被选中时改变其样式 */
:target {background-color: yellow;
}

2.2.3 :nth-child() 选择器

:nth-child() 选择器允许开发者选中特定的子元素。

/* 选中每个第二个子元素 */
li:nth-child(2n) {background-color: lightgray;
}/* 选中每个第三个同类型的子元素 */
li:nth-of-type(3n) {color: blue;
}

2.3 伪类与伪元素

伪类和伪元素是CSS的重要特性,用于选择不可见的元素或元素的某一部分。

2.3.1 伪类

伪类用于选中元素的特定状态。

/* 选中鼠标悬停时的元素 */
a:hover {color: orange;
}/* 选中获得焦点的输入框 */
input:focus {border-color: blue;
}

2.3.2 伪元素

伪元素用于选择元素的一部分,如首字母或内容前后的位置。

/* 选中<p>元素的首字母 */
p::first-letter {font-size: 2em;color: red;
}/* 在每个<p>元素的内容前插入内容 */
p::before {content: "Note: ";font-weight: bold;
}

2.4 选择器的优先级与最佳实践

选择器的优先级决定了当多个选择器匹配同一个元素时,哪个选择器的样式会被应用。了解选择器的优先级对编写高效的CSS代码非常重要。

2.4.1 选择器优先级规则

优先级由四个部分组成,从高到低依次是:内联样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素。

/* 内联样式优先级最高 */
<style><div style="color: red;">内联样式</div>
</style>/* ID选择器 */
#id {color: blue; /* 优先级为 0, 1, 0, 0 */
}/* 类选择器 */
.class {color: green; /* 优先级为 0, 0, 1, 0 */
}/* 元素选择器 */
div {color: yellow; /* 优先级为 0, 0, 0, 1 */
}

2.4.2 注意事项

  1. 避免过度使用ID选择器:ID选择器优先级很高,不易覆盖,尽量使用类选择器。
  2. 结构清晰:确保CSS代码结构清晰,选择器简洁易懂。
  3. 使用后代选择器谨慎:后代选择器的优先级较高,过多使用会导致样式难以维护。
  4. 利用浏览器开发工具:使用浏览器开发工具(如Chrome DevTools)来调试和查看选择器优先级。

2.5 选择器的优先级与最佳实践

选择器的优先级决定了当多个选择器匹配同一个元素时,哪个选择器的样式会被应用。了解选择器的优先级对编写高效的CSS代码非常重要。

2.5.1 选择器优先级规则

优先级由四个部分组成,从高到低依次是:内联样式、ID选择器、类选择器/属性选择器/伪类、元素选择器/伪元素。

/* 内联样式优先级最高 */
<style><div style="color: red;">内联样式</div>
</style>/* ID选择器 */
#id {color: blue; /* 优先级为 0, 1, 0, 0 */
}/* 类选择器 */
.class {color: green; /* 优先级为 0, 0, 1, 0 */
}/* 元素选择器 */
div {color: yellow; /* 优先级为 0, 0, 0, 1 */
}

2.5.2 注意事项

  1. 避免过度使用ID选择器:ID选择器优先级很高,不易覆盖,尽量使用类选择器。
  2. 结构清晰:确保CSS代码结构清晰,选择器简洁易懂。
  3. 使用后代选择器谨慎:后代选择器的优先级较高,过多使用会导致样式难以维护。
  4. 利用浏览器开发工具:使用浏览器开发工具(如Chrome DevTools)来调试和查看选择器优先级。

相关文章:

2. CSS选择器与伪类

2.1 基本选择器回顾 在开始介绍CSS3选择器之前&#xff0c;我们先回顾一下CSS的基本选择器。这些选择器是所有CSS开发的基础。 2.1.1 元素选择器 元素选择器用于选中指定类型的HTML元素。 /* 选中所有的<p>元素 */ p {color: blue; }2.1.2 类选择器 类选择器用于选中…...

tcpdump源码分析

进入tcpdump.c&#xff08;函数入口&#xff09;之前&#xff0c;先看一些头文件netdissect.h里定义了一个数据结构struct netdissect_options来描述tcdpump支持的所有参数动作&#xff0c;每一个参数有对应的flag, 在tcpdump 的main 里面&#xff0c; 会根据用户的传入的参数来…...

搭建Harbor镜像仓库

前言 1、系统版本&#xff1a;CentOS9 2、harbor版本&#xff1a;v2.9.4 3、提前安装好docker和docker-compose&#xff0c;参考地址。我这里安装的版本是docker&#xff1a;26.1.3 docker-compose&#xff1a;v2.27.1 安装步骤 下载安装包 1、下载地址&#xff1a;ha…...

【C/C++】Makefile文件的介绍与基本用法

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…...

PHP生成二维码+二维码包含logo图片展示

composer require chillerlan/php-qrcode 用到的扩展自己安装&#xff08;注&#xff1a;只生成二维码只要开gd扩展就行&#xff09; 仅生成二维码看这个&#xff1a; use chillerlan\QRCode\QRCode;public function QRCode(){$qrcode new QRCode();$url "http://ww…...

vue项目打包教程

如果是用 vue-cli 创建的项目&#xff0c;则项目目录中没有 config 文件夹&#xff0c;所以我们需要自建一个配置文件&#xff1b;在vue项目目录下创建文件 vue.config.js&#xff0c;需注意文件名称必须是 vue.config.js&#xff0c;然后在文件中插入以下代码&#xff1a; 文件…...

制作电子画册速成攻略,快来试试

​当今社会&#xff0c;数字媒体日益普及&#xff0c;电子画册作为一种崭新的展示方式&#xff0c;受到了越来越多人的青睐。它不仅形式新颖&#xff0c;互动性强&#xff0c;而且制作起来也并不复杂。想知道如何快速掌握制作电子画册的技巧吗&#xff1f;我来教你吧。 接下来&…...

【java程序设计期末复习】chapter7 内部类和异常类

内部类和异常类 内部类 ava支持在一个类中声明另一个类&#xff0c;这样的类称作内部类&#xff0c;而包含内部类的类成为内部类的外嵌类。 注意 &#xff08;1&#xff09;内部类的类体中不可以声明类变量和类方法。 &#xff08;2&#xff09;外嵌类的类体中可以用内部类…...

Windows下安装配置深度学习环境

Windows下安装配置深度学习环境 1. 准备工作 1.1 环境准备 操作系统&#xff1a;win10 22H2 GPU&#xff1a;Nvidia GeForce RTX 3060 12G 1.2 安装Nvidia驱动、cuda、cuDNN 下载驱动需要注册并登录英伟达账号。我这里将下面用到的安装包放到了百度网盘&#xff0c;可以关注微信…...

如何使用ssh将vscode 连接到服务器上,手把手指导

一、背景 我们在开发时&#xff0c;经常是window上安装一个vscode编辑器&#xff0c;去连接一个虚拟机上的linux&#xff0c;这里常用的是SSH协议&#xff0c;了解其中的操作非常必要。 二、SSH协议 SSH&#xff08;Secure Shell&#xff09;是一种安全协议&#xff0c;用于…...

Tomcat调优参数

JVM优化 Tomcat是一个Web容器&#xff0c;所有的jar其实都共享Tomcat中的JVM参数&#xff0c;所以Tomcat的JVM参数优化至关重要。 Tomcat的JVM参数是在启动脚本中设置的&#xff0c;如想要设置最大堆内存和最小堆内存时&#xff1a; 在windows的启动脚本catalina.bat中的set &q…...

云计算和大数据处理

文章目录 1.云计算基础知识1.1 基本概念1.2 云计算分类 2.大数据处理基础知识2.1 基础知识2.3 大数据处理技术 1.云计算基础知识 1.1 基本概念 云计算是一种提供资源的网络&#xff0c;使用者可以随时获取“云”上的资源&#xff0c;按需求量使用&#xff0c;并且可以看成是无…...

VAE-变分自编码器(Variational Autoencoder,VAE)

变分自编码器&#xff08;Variational Autoencoder&#xff0c;VAE&#xff09;是一种生成模型&#xff0c;结合了概率图模型与神经网络技术&#xff0c;广泛应用于数据生成、表示学习和数据压缩等领域。以下是对VAE的详细解释和理解&#xff1a; 基本概念 1. 自编码器&#…...

Android Room 使用模版

文章目录 一、配置依赖 plugins {id kotlin-kapt }android {compileOptions {sourceCompatibility JavaVersion.VERSION_17targetCompatibility JavaVersion.VERSION_17}kotlinOptions {jvmTarget 17} }dependencies {implementation("androidx.room:room-runtime:2.4.2&…...

Linux/Ubuntu 中安装 ZeroTier,实现内网穿透,2分钟搞定

相信很多人都有远程连接家中设备的需求&#xff0c;如远程连接家中的NAS、Windows等服务&#xff0c;所以会涉及到一个内网穿透工具的使用&#xff0c;如果没有公网IP的情况下&#xff0c;推荐大家使用ZeroTier&#xff0c;这是一款强大的内网穿透工具。 mac和windows版的操作…...

java技术:oauth2协议

目录 一、黑马程序员Java进阶教程快速入门Spring Security OAuth2.0认证授权详解 1、oauth服务 WebSecurityConfig TokenConfig AuthorizationServer 改写密码校验逻辑实现类 2、oauth2支持的四种方式&#xff1a; 3、oauth2授权 ResouceServerConfig TokenConfig 4、…...

Java 18 新特性详解

Java 18 新特性详解 Java 18 作为 Oracle 推出的又一重要版本&#xff0c;继续秉持着 Java 平台“创新但不破坏”的原则&#xff0c;带来了多项旨在提升开发效率、性能和安全性的新特性。本篇文章将深入解析 Java 18 引入的主要特性&#xff0c;并探讨它们如何影响开发者的工作…...

【css3】06-css3新特性之网页布局篇

目录 伸缩布局或者弹性布局【响应式布局】 1 设置父元素为伸缩盒子 2 设置伸缩盒子主轴方向 3 设置元素在主轴的对齐方式 4 设置元素在侧轴的对齐方式 5 设置元素是否换行显示 6 设置元素换行后的对齐方式 7 效果测试原码 伸缩布局或者弹性布局【响应式布局】 1 设置父元…...

【开源】大学生竞赛管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、系统介绍 学生管理模块 教师管理模块 竞赛信息模块 竞赛报名模块 二、系统截图 三、核心代码 一、系统介绍 基于Vue.js和SpringBoot的大学生竞赛管理系统&#xff0c;分为管理后台和用户网页端&#xff0c;可以给管理员、学生和教师角色使用&#xff0c;包括学…...

跨境选品师不是神话:普通人也能轻松掌握,开启全球贸易新篇章!

随着互联网技术的飞速发展&#xff0c;跨境电商行业已成为全球经济的新增长点。在这个背景下&#xff0c;一个新兴的职业——跨境选品师&#xff0c;逐渐走进了人们的视野。那么&#xff0c;跨境选品师究竟是做什么的?普通人又该如何成为优秀的跨境选品师呢? 一、跨境选品师的…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

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

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

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

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

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

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...