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

CSS选择符和可继承属性

属性选择符

  • 示例:a[target="_blank"] { text-decoration: none; }(选择所有target="_blank"<a>元素)
/* 选择所有具有class属性的h1元素 */  
h1[class] {  color: silver;  
}  /* 选择所有具有href属性的a元素 */  
a[href] {  text-decoration: underline;  
}
/* 选择所有name属性值为"username"的input元素 */  
input[name="username"] {  border: 1px solid black;  
}  /* 选择所有class属性值为"highlight"的元素 */  
.highlight, [class="highlight"] {  background-color: yellow;  
}
/* 选择所有class属性值中包含"row-"的div元素 */  
div[class*="row-"] {  border-bottom: 1px solid #ccc;  
}  /* 选择所有id属性值以"nav-"开头的元素 */  
[id^="nav-"] {  color: navy;  
}

伪类选择符

  • 选择处于特定状态的元素。
  • :hover:用户悬停在元素上时。
  • :active:元素被用户激活时(如点击)。
  • :visited:用户已访问的链接。
  • :first-child:其父元素的第一个子元素。

伪元素选择符

  • 选择元素的特定部分或插入的内容
  • 示例:
    • ::before:在元素内容之前插入内容。
    • ::after:在元素内容之后插入内容。
    • ::first-line:选择元素的第一行。
    • ::first-letter:选择元素的第一个字母。
  • 组合选择符 h1, h2 { color: blue; }(选择所有<h1><h2>元素)
  • 后代选择符(空格分隔)div p { color: green; }(选择所有<div>元素内的<p>元素)
  • 子元素选择符>):div > p { color: purple; }所有直接位于<div>元素内的<p>元素)

子元素选择符使用>符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素

  • 相邻兄弟选择符+):div + p { margin-top: 20px; }紧接<div>元素后的<p>元素)
  • 一般兄弟选择符~h1 ~ p { font-size: 14px; }<h1>元素之后的所有<p>兄弟元素

可继承的属性

大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:

  • 字体及其相关属性font-familyfont-sizefont-weightfont-stylefont-variantfont-stretchfont-size-adjustfontline-height
  • 文本相关属性text-indenttext-aligntext-transformtext-decorationletter-spacingword-spacingwhite-spacevertical-align (对于内联元素和表格单元格), text-shadowdirectionunicode-bidi
  • 颜色相关属性coloropacity (注意,opacity继承会影响元素的透明度,但不会影响其颜色值本身)
  • 列表属性list-style-typelist-style-positionlist-style-imagelist-style
  • 表格布局属性border-collapseborder-spacingempty-cellscaption-side
  • 其他属性:cursorvisibilityspeak
不可继承的属性

大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:

  • 盒模型相关属性widthheightmarginpaddingborderdisplaypositionfloatcleartoprightbottomleftoverflowclipz-indexbox-sizingflexgrid 布局属性等
  • 背景和边框属性backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentborder-colorborder-styleborder-widthborder-radius 等
  • 其他与布局和外观相关的属性:opacity (当作为单独属性时,而非从color继承), visibility: collapse (对于表格行、行组、列和列组), contentcounter-resetcounter-incrementoutlinequotesvolumespeak-headerspeak-numeralspeak-punctuationvoice-familyvolumepitchpitch-rangestressrichnessazimuthelevation 等

相关文章:

CSS选择符和可继承属性

属性选择符&#xff1a; 示例&#xff1a;a[target"_blank"] { text-decoration: none; }&#xff08;选择所有target"_blank"的<a>元素&#xff09; /* 选择所有具有class属性的h1元素 */ h1[class] { color: silver; } /* 选择所有具有hre…...

C++升级软件时删除老版本软件的桌面快捷方式(附源码)

删除桌面快捷方式其实是删除桌面上的快捷方式文件,那我们如何去删除桌面快捷方式文件呢?软件可能已经发布过多个版本,其中的一些版本的快捷方式文件名称可能做了多次改动,程序中不可能记录每个版本的快捷方式名称,没法直接去删除快捷方式文件。本文就给出一种有效的处理办…...

github国内加速访问有效方法

这里只介绍实测最有效的一种方法&#xff0c;修改主机的Hosts文件&#xff0c;如果访问github网站慢或者根本无法访问的时候可以采用下面方法进行解决。 1、搜索一个IP查询网站 首先百度搜索选择一个IP查询的网站&#xff0c;这里我用下面这个网站&#xff08;如果该网站失效…...

如何处理JavaScript中的浮点数精度问题

在开发过程中&#xff0c;特别是涉及到金额计算或需要精确比较的场景&#xff0c;浮点数精度问题是一个常见而重要的挑战。本文将介绍在JavaScript中如何识别、理解和解决这些问题&#xff0c;并提供一些实用的技巧和建议。 1. 问题背景 JavaScript中的浮点数采用IEEE 754标准…...

ASPICE标准与ASPICE认证:提升汽车软件开发质量与效率的关键途径

在当今日新月异的科技时代&#xff0c;软件产品的质量和可靠性成为了企业赢得市场的关键。而ASPICE&#xff08;Automotive SPICE&#xff09;标准&#xff0c;作为汽车行业中软件过程评估的国际通用标准&#xff0c;正逐渐引起行业的广泛关注。那么&#xff0c;ASPICE标准究竟…...

easyexcel的简单使用(execl模板导出)

模板支持功能点 支持列表支持自定义头名称支持自定义fileName支持汇总 模板示例 操作 pom引入 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>${easyexcel.version}</version></dep…...

代码随想录算法训练营第39天|● 62.不同路径 ●63. 不同路径 II

不同路径 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j] &#xff1a;表示从&#xff08;0 &#xff0c;0&#xff09;出发&#xff0c;到(i, j) 有dp[i][j]条不同的路径。 2.确定递推公式 …...

【DevOps】 什么是容器 - 一种全新的软件部署方式

目录 引言 一、什么是容器 二、容器的工作原理 三、容器的主要特性 四、容器技术带来的变革 五、容器技术的主要应用场景 六、容器技术的主要挑战 七、容器技术的发展趋势 引言 在过去的几十年里,软件行业经历了飞速的发展。从最初的大型机时代,到后来的个人电脑时代,…...

使用pnpm创建vue3项目

https://pnpm.io/zh/ 全局安装&#xff1a; npm install -g pnpm 检查版本&#xff1a; pnpm -v 创建vue3项目&#xff1a; pnpm create vuelatest 项目装包&#xff1a; pnpm install 运行项目&#xff1a; pnpm dev 命令行&#xff1a; https://pnpm.io/zh/pnpm-cli pnpm …...

【软件测试】43个功能测试点总结

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 功能测试就是对产品的各功能进行验证&#xff0c;根据功能测试用例&#xff0c;逐项测试&#xf…...

Python — — GPU编程

Python — — GPU编程 要想将Python程序运行在GPU上&#xff0c;我们可以使用numba库或者使用cupy库来实现GPU编程。 壹、numba Numba 是一个开源的 JIT (Just-In-Time) 编译器&#xff0c;它可以将 Python 代码转换成机器代码以提高性能。Numba 特别适用于需要高性能计算的…...

C#中的枚举类-自定义属性

在实际开发过程中&#xff0c;我们常常会用到枚举类&#xff0c;使用枚举的时候往往有着各种使用条件&#xff0c;如何给枚举加入使用条件呢&#xff1f; 答案就是我们的——自定义属性 废话不多说&#xff0c;上代码 枚举类 首先我们要有一个枚举类 public enum XXXX枚举…...

多态深度剖析

前言 继承是多态的基础&#xff0c; 如果对于继承的知识还不够了解&#xff0c; 可以去阅读上一篇文章 继承深度剖析 基本概念与定义 概念&#xff1a; 通俗来说&#xff0c;就是多种形态。具体点就是去完成某个行为&#xff0c; 当不同的对象去完成时会产生出不同的状…...

OSPF被动接口配置(华为)

#交换设备 OSPF被动接口配置 一、基本概念 OSPF被动接口&#xff0c;也称为抑制接口&#xff0c;即将路由器某一接口配置为被动接口后&#xff0c;该接口不会再接受和发送OSPF报文 二、使用场景 在路由器与终端相近或者直接相连的一侧配置被动接口 因为OSPF会定期发送报文…...

Android --- 异步操作

同步和异步的差异 同步&#xff1a;在发生某件事后什么也不做&#xff0c;直到该事件完成后&#xff0c;再继续进行 异步&#xff1a;在某件事发生后&#xff0c;可以在等待他完成的时候去处理其他事件&#xff0c;等到该事件发生完成后&#xff0c;再回过头来处理它。 异步…...

(55)MOS管专题--->(10)MOS管的封装

(10)MOS管的封装 1 目录 (a)IC简介 (b)数字IC设计流程 (c)Verilog简介 (d)MOS管的封装 (e)结束 1 IC简介 (a)在IC设计中,设计师使用电路设计工具(如EDA软件)来设计和模拟各种电路,例如逻辑电路、模拟电路、数字信号处理电路等。然后,根据设计电路的…...

超高清图像生成新SOTA!清华唐杰教授团队提出Inf-DiT:生成4096图像比UNet节省5倍内存。

清华大学唐杰教授团队最近在生成超高清图像方面的新工作&#xff1a;Inf-DiT&#xff0c;通过提出一种单向块注意力机制&#xff0c;能够在推理过程中自适应调整内存开销并处理全局依赖关系。基于此模块&#xff0c;该模型采用了 DiT 结构进行上采样&#xff0c;并开发了一种能…...

网络安全 - DNS劫持原理 + 实验

DNS 劫持 什么是 DNS 为什么需要 DNS D N S \color{cyan}{DNS} DNS&#xff08;Domain Name System&#xff09;即域名系统。我们常说的 DNS 是域名解析协议。 DNS 协议提供域名到 IP 地址之间的解析服务。计算机既可以被赋予 IP 地址&#xff0c;也可以被赋予主机名和域名。用…...

MyBatis的运行原理

目录 1、目的&#xff1a;梳理一下MyBatis运行时的几个对象&#xff0c;我们需要搞清楚他们的作用&#xff0c;进而需要理解mybatis的整个工作流程和执行原理。 2、简要概括各个类 2.1 Resources 作用&#xff1a;编写资源加载类&#xff0c;使用类加载器加载 配置文件(myb…...

算法题解记录29+++全排列(百日筑基)

一、题目描述 题目难度&#xff1a;中等 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示…...

STM32串口通信实战:从零配置USART到数据收发(附代码)

STM32串口通信实战&#xff1a;从零配置USART到数据收发&#xff08;附代码&#xff09; 第一次接触STM32的串口通信时&#xff0c;我被各种术语搞得晕头转向——波特率、数据位、停止位、校验位...更别提那些看起来像天书一样的寄存器配置了。直到在项目中被逼着用USART和传感…...

Qwen3-0.6B-FP8高性能推理:FP8量化不损质量,数学/代码生成保持SOTA

Qwen3-0.6B-FP8高性能推理&#xff1a;FP8量化不损质量&#xff0c;数学/代码生成保持SOTA 最近在部署大模型时&#xff0c;你是不是也经常遇到这样的困扰&#xff1a;模型效果确实不错&#xff0c;但推理速度慢、显存占用高&#xff0c;稍微复杂点的任务就得等半天。特别是像…...

FunASR与ModelScope语音识别集成实战:从零到部署的完整指南

FunASR与ModelScope语音识别集成实战&#xff1a;从零到部署的完整指南 语音识别技术正在改变我们与设备交互的方式&#xff0c;而FunASR与ModelScope的结合让开发者能够快速构建高质量的语音应用。本文将通过全新的视角&#xff0c;带你体验从模型获取到实际部署的全过程&…...

ABAQUS有限元模型:基于CEL算法的斜桩锤击入土模拟

ABAQUS有限元模型&#xff1a;基于cel算法的斜桩锤击入土模型。 使用ABAQUS有限元软件&#xff0c;基于CEL算法&#xff0c;模拟了斜桩通过锤击作用入土的情况&#xff0c;首先进行了土体的地应力平衡&#xff0c;然后对斜桩施加轴力方向的锤击荷载&#xff0c;以1.5s为循环&am…...

AI不再是聊天机器人!从《Agentic Design Patterns》汲取的5大核心启示,彻底重塑你的架构思维

大多数开发者还以为&#xff0c;生成式AI的终极答案就是把大模型参数堆得更大、提示词写得更聪明&#xff0c;就能解决一切生产力难题。但最近读完Antonio Gulli的《Agentic Design Patterns》&#xff0c;我突然意识到&#xff1a;我们过去两年其实只造出了“引擎”&#xff0…...

双模型对比:OpenClaw同时接入Qwen3.5-9B与Llama3的任务执行差异

双模型对比&#xff1a;OpenClaw同时接入Qwen3.5-9B与Llama3的任务执行差异 1. 测试背景与实验设计 上周我在整理一个长期堆积的文档项目时&#xff0c;发现手动分类200多份混合格式文件&#xff08;PDF/Word/Markdown&#xff09;需要至少3小时。作为OpenClaw的早期使用者&a…...

专业硬件监控解决方案:LibreHardwareMonitor完全指南

专业硬件监控解决方案&#xff1a;LibreHardwareMonitor完全指南 【免费下载链接】LibreHardwareMonitor Libre Hardware Monitor, home of the fork of Open Hardware Monitor 项目地址: https://gitcode.com/GitHub_Trending/li/LibreHardwareMonitor 在当今数字化时代…...

大模型Prompt实战指南:从基础到高阶的提问艺术

1. 为什么Prompt提问技巧如此重要&#xff1f; 第一次用ChatGPT时&#xff0c;我直接问"怎么写工作总结"&#xff0c;结果得到一篇泛泛而谈的模板。后来学会在问题里加上"我是一名互联网产品经理&#xff0c;需要向CTO汇报季度工作"&#xff0c;回答立刻精…...

UniApp微信小程序分享页的‘回家’按钮:一个getCurrentPages()的巧妙应用

UniApp微信小程序分享页的智能导航设计&#xff1a;基于页面栈的优雅解决方案 在移动应用生态中&#xff0c;微信小程序因其轻量化和社交属性获得了广泛应用。作为开发者&#xff0c;我们经常面临一个看似简单却影响用户体验的核心问题&#xff1a;当用户通过分享链接进入小程序…...

LeetCode 34. 在排序数组中查找元素的第一个和最后一个位置:二分查找实战

刷题路上&#xff0c;二分查找是绕不开的经典算法&#xff0c;而LeetCode 34题「在排序数组中查找元素的第一个和最后一个位置」&#xff0c;正是二分查找的进阶应用——它不仅要求我们找到目标值&#xff0c;更要精准定位其在非递减数组中的起始和结束位置&#xff0c;同时还要…...