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 等

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

渗透测试和红蓝对抗是什么?二者之间有何区别?

在网络安全这个庞大的体系中&#xff0c;渗透测试、红蓝对抗是比较常见的专业名词&#xff0c;承担着非常重要的作用&#xff0c;那么什么是渗透测试、红蓝对抗?红蓝对抗和渗透测试有什么区别?小编通过这篇文章为大家介绍一下。 渗透测试 渗透测试&#xff0c;是通过模拟黑…

Java基础 - 练习(一)打印等腰三角形

Java基础练习 打印等腰三角形&#xff0c;先上代码&#xff1a; public static void main(String[] args) {// 打印等腰三角形System.out.println("打印等腰三角形&#xff1a;");isoscelesTriangle(); } public static void isoscelesTriangle() {// for循环控制行…

java:一个springfox swagger2的简单例子

# 示例程序 【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version> </dependency> <dependency><groupId>…

《Cloud Native Data Center Networking》(云原生数据中心网络设计)读书笔记 -- 02 Clos拓扑

本章回答以下问题&#xff1a; 什么是 Clos 拓扑&#xff0c;它与“接入 - 汇聚 - 核心”拓扑有何不同?Clos 拓扑的特征是什么?Clos 拓扑对数据中心网络的影响是什么? Clos拓扑 云原生数据中心基础设施的先行者们想要构建一种支持大规模水平扩展网络。 基本的Clos拓扑如图…

保姆级pycharm远程连接linux服务器

1、登录服务器&#xff0c;创建账号。 一般都是管理员账户登录&#xff0c;创建自己的账号。如果不需要&#xff0c;可跳过这步。 打开MobaXterm&#xff0c;点击左上角Session创建会话。 再点击左上角SSH&#xff0c;分别输入服务器ip和账号&#xff0c;最后点ok&#xff0c;进…

C++使用spdlog输出日志文件

参考博客&#xff1a; 日志记录库 spdlog 基础使用_spdlog 写日志-CSDN博客 GitHub - gabime/spdlog: Fast C logging library. 首先在github上下载spdlog源码&#xff0c;不想编译成库的话&#xff0c;可以直接使用源码&#xff0c;将include文件夹下的spdlog文件夹&#x…

Langchain-chatchat: Langchain基本概念

一、Langchain的chain是指的是什么&#xff1f; langchain字面意思是长长的链子&#xff0c;那么chains 链子具体指的是什么呢&#xff1f; 智普AI助手的回答如下&#xff1a; LangChain 中的 “chain” 是指链式操作或者序列化操作&#xff0c;它是一种将多个任务或操作按照…

Aeron:Aeron Agent

Aeron Agent 是一个 Java 代理&#xff0c;用于提供 Aeron、Aeron Archive 和 Aeron Cluster 中发生的运行时低级日志信息。这些日志语句包括从高级管理员事件到大容量数据帧事件。 在调试 Archive 和 Cluster 问题时&#xff0c;Aeron Agent 的日志数据尤其有用。 一、Availab…

Excel VLOOKUP 使用记录

Excel VLOOKUP 使用记录 VLOOKUP简单使用 VLOOKUP(lookup_value,table_array,col_index_num,[range-lookup]) 下面是excel对VLOOKUP 的解释 lookup_value&#xff08;查找值&#xff09;&#xff1a;要匹配查找的值 table_array&#xff08;数据表&#xff09;&#xff1…

基于(C++)VTK9.3.0+Microsoft Visual Studio2017的DICOM影像VR体绘制完整实现代码

开发基于&#xff08;C&#xff09;VTK9.3.0Microsoft Visual Studio2017的DICOM影像VR体绘制程序的前提是&#xff1a; 1、已编译完成VTK9.3.0&#xff0c;可在VTK官网下载VTK9.3.0源码&#xff0c;官网下载地址&#xff1a;Download | VTK 选择所需的VTK版本进行下载 具体编…

图片的大小如何改变?有效率改图片大小的方法

图片怎么将改变图片大小呢&#xff1f;现在经常在使用图片的时候需要先按照上传平台的要求来修改尺寸和大小&#xff0c;将图片调整到满足使用的大小之后然后上传使用。那么如何在线改变图片大小呢&#xff0c;有一个很简单的方法能够快速在线改图片大小&#xff0c;今天小编将…

c++ 编译过程杂记等

开篇一张图。 编译器 把我们的代码翻译成机器语言 ​ gcc编译程序的过程 gcc编译程序主要经过四个过程&#xff1a; 四个过程说明&#xff1a; ​ 预处理实际上是将头文件、宏进行展开。 编译阶段&#xff0c;gcc调用不同语言的编译器&#xff0c;例如c语言调用编译器ccl…

示例:WPF中绑定枚举到ComboBox的方式

一、目的&#xff1a;在开发过程中&#xff0c;经常会需要把枚举绑定到ComboxBox下拉列表中&#xff0c;其实方法有很多&#xff0c;这里面通过MarkupExtension扩展GetEnumSourceExtension去绑定到列表 二、实现 定义GetEnumSourceExtension类 public class GetEnumSourceExte…

FLAN-T5模型的文本摘要任务

Text Summarization with FLAN-T5 — ROCm Blogs (amd.com) 在这篇博客中&#xff0c;我们展示了如何使用HuggingFace在AMD GPU ROCm系统上对语言模型FLAN-T5进行微调&#xff0c;以执行文本摘要任务。 介绍 FLAN-T5是谷歌发布的一个开源大型语言模型&#xff0c;相较于之前的…

一文彻底理解机器学习 ROC-AUC 指标

在机器学习和数据科学的江湖中&#xff0c;评估模型的好坏是非常关键的一环。而 ROC&#xff08;Receiver Operating Characteristic&#xff09;曲线和 AUC&#xff08;Area Under Curve&#xff09;正是评估分类模型性能的重要工具。 这个知识点在面试中也很频繁的出现。尽管…

springboot+vue+mybatis酒店房间管理系统+PPT+论文+讲解+售后

随着现在网络的快速发展&#xff0c;网络的应用在各行各业当中它很快融入到了许多商家的眼球之中&#xff0c;他们利用网络来做这个电商的服务&#xff0c;随之就产生了“酒店房间管理系统”&#xff0c;这样就让人们酒店房间管理系统更加方便简单。 对于本酒店房间管理系统的…

深浅拷贝以及正则表达式(python)

浅拷贝和深拷贝&#xff1a; 浅拷贝&#xff1a; copy函数是浅拷贝&#xff0c;支队可变类型的第一层对象进行拷贝&#xff0c;对拷贝的对象开辟显得内存空间进行存储&#xff0c;不会拷贝对象内部的子对象 不可变类型的浅拷贝示例&#xff1a; 浅拷贝不会对不可变类型进行…

飞天茅台酒的惊魂五日

“电商百亿补贴修改发货规则”导致黄牛资金压力剧增&#xff0c;资金压力之下部分黄牛择低价甩卖&#xff0c;其他求货的酒行、大酒商则选择观望&#xff0c;价格下行压力最终扩散&#xff0c;造成整个回收市场踩踏&#xff0c;价格急速下跌。 不到半年时间&#xff0c;飞天茅台…

FreeRtos-09事件组的使用

1. 事件组的理论讲解 事件组:就是通过一个整数的bit位来代表一个事件,几个事件的or和and的结果是输出 #define configUSE_16_BIT_TICKS 0 //configUSE_16_BIT_TICKS用1表示16位,用0表示32位 1.1 事件组适用于哪些场景 某个事件若干个事件中的某个事件若干个事件中的所有事…

MySQL常见的命令

MySQL常见的命令 查看数据库&#xff08;注意添加分号&#xff09; show databases;进入到某个库 use 库; 例如&#xff1a;进入test use test;显示表格 show tables;直接展示某个库里面的表 show tables from 库&#xff1b; 例如&#xff1a;展示mysql中的表格 show tabl…