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 等

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

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

相关文章

配置文件-基础配置,applicationproperties.yml

黑马程序员Spring Boot2 文章目录 1、属性配置2、配置文件分类3、yaml文件4、yaml数据读取4.1 读取单个数据4.2 读取全部属性数据4.3 读取引用类型属性数据 1、属性配置 SpringBoot默认配置文件application.properties&#xff0c;通过键值对配置对应属性修改配置 修改服务器端…

浏览器必装插件推荐:最新版Simple Allow Copy,解除网页复制限制!

经常在网上找资料的朋友&#xff0c;尤其是学生党&#xff0c;总会遇到一个问题&#xff1a;很多资料网站的文字是禁止复制的。于是大家通常会使用各种文字识别软件来图文转换&#xff0c;或者直接手打。 今天这款小工具&#xff0c;可以轻松复制各种氪金网站上的任何文字&…

视频监控平台:通过网络SDK对TCL网络摄像机进行PTZ控制 的源代码介绍及分享

目录 一、视频监控平台介绍 &#xff08;一&#xff09;概述 &#xff08;二&#xff09;视频接入能力介绍 &#xff08;三&#xff09;功能介绍 二、TCL网络摄像机 &#xff08;一&#xff09;360度全景自动旋转&#xff1a; &#xff08;二&#xff09;高清夜视和全彩…

Tustin变换,连续传递函数离散化

Tustin变换&#xff0c;连续传递函数离散化 举例 上述说明了&#xff0c;不要盲目相信ChatGPT f_vehspd 12; phase_vehspd 120; f_res f_vehspd / tan((360-phase_vehspd) * pi/(4*180) );%连续传递函数 num [1 -2*f_res f_res^2]; den [1 2*f_res f_res^2]; sys tf(num…

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

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

Part 4.2 背包动态规划

->背包模型模板(0/1,分组&#xff0c;完全&#xff0c;多重)<- [NOIP2018 提高组] 货币系统 题目背景 NOIP2018 提高组 D1T2 题目描述 在网友的国度中共有 n n n 种不同面额的货币&#xff0c;第 i i i 种货币的面额为 a [ i ] a[i] a[i]&#xff0c;你可以假设每…

算法03 二分查找算法【C++实现】

二分查找的概念 二分查找又称为折半查找&#xff0c;主要用于查找一个有序数组中某一个数的位置。 主要思想如下&#xff1a; 在一个有序数组中&#xff0c;取数组的中间值与要查找的数进行比较&#xff1b; 若要查找的数等于中间值&#xff0c;查找成功。 二分查找的步骤 …

Node.js安装扫盲

一、Node.js安装 在官网下载node.js安装包 双击打开node-v20.14.0-x64.ms文件&#xff0c;点击运行 进入安装Node.js的对话框&#xff0c;点击Next继续 勾选复选框后点击Next继续 默认安装路径 默认配置 这里不需要勾选&#xff0c;直接点击Next 点击Install 二、Node.js验…

【安装和引入 PyTorch 包,快来收藏】

在本文介绍 PyTorch 中一些最常用的命令和设置。 一个完成的 PyTorch 工作流程。 安装和引入 PyTorch 包 最好的安装教程就是去官方网站&#xff1a;https://pytorch.org/get-started/locally/ 安装结束之后&#xff0c;直接引入整个 torch 包&#xff1a; import torch或…

SQL注入-上篇

SQL注入 注入是web安全的头号大敌。注入攻击漏洞往往是应用程序缺少对输入进行安全性检查所引起的。攻击者把一些包含攻击代码当做命令或者查询语句发送给解释器&#xff0c;这些恶意数据可以欺骗解释器&#xff0c;从而执行计划外的命令或者未授权访问数据。注入漏洞通常能sq…

MySQL约束详解:构建数据完整性基石

目录 MySQL约束1.1 约束1.1 数据类型1.2 主键约束[重要]1.3 自增约束1.4 唯一约束1.5 非空约束1.6 默认值代码演示 1.7 外键约束[了解]思维导图最后 MySQL约束 MySQL作为广泛使用的开源关系型数据库管理系统&#xff0c;其强大的数据约束功能对于维护数据的一致性和准确性至关…

4.类,方法,对象

1.1.2. 面向对象程序设计的三大特征 1.1.2.1. 封装 面向对象编程核心思想之一就是将数据和对数据的操作封装在一起&#xff0c;形成一般的概念&#xff0c;比如类的概念。 1.1.2.2. 继承 继承体现了一种先进的编程模式。子类可以继承父类的属性和方法。 1.1.2.3. 多态 多…

Day 44 Ansible自动化运维

Ansible自动化运维 几种常用运维工具比较 ​ Puppet ​ —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱ruby ​ SaltStack ​ —基于 Python 开发,采用 C/S 架构,相对 puppet 更轻量级,配置语法使用 YAML,使得配置脚本更简单 ​ Ansible ​ —基于 …

Python学习笔记12:进阶篇(一),类的相关知识

前言 在讲类之前&#xff0c;我们简单介绍一些Python的知识。这些知识在入门篇没讲&#xff0c;想学Python的&#xff0c;基本都对Python有基础的了解&#xff0c;但是今天开始的进阶知识&#xff0c;会涉及到一些Python的特性&#xff0c;所以在这里介绍一下。 Python是一种高…

Unity2D游戏制作入门 | 13 ( 之人物三段攻击 )

上期链接&#xff1a;Unity2D游戏制作入门 | 12(之人物受伤和死亡的逻辑动画)-CSDN博客 上期我们聊了人物的受伤和死亡的逻辑和动画&#xff0c;我们主要学习了事件的执行&#xff0c;即我们在人物受伤时可能会触发很多的事件&#xff0c;比如触发人物受伤的动画以及播放音乐等…

LabVIEW电表改装与校准仿真系统

LabVIEW开发的电表改装与校准仿真实验平台不仅简化了传统的物理实验流程&#xff0c;而且通过虚拟仿真提高了实验的效率和安全性。该平台通过模拟电表改装与校准的各个步骤&#xff0c;允许学生在没有实际硬件的情况下完成实验&#xff0c;有效地结合了理论学习和实践操作。 项…

计算机组成原理(三)

文章目录 只读存储器和闪速存储器ROM 只读存储器光擦可编程只读存储器(EPROM) 闪速存储器 并行存储器双端口存储器多模块交叉存储器定量分析 相联存储器 只读存储器和闪速存储器 ROM 只读存储器 ROM ,只能读出不能写入&#xff0c;最大的优点是不易失性。 光擦可编程只读存储器…

Spring Security+Spring Boot实现登录认证以及权限认证

基本概念 “Authentication(认证)”是spring security框架中最重要的功能之一&#xff0c;所谓认证&#xff0c;就是对当前访问系统的用户给予一个合法的身份标识&#xff0c;用户只有通过认证才可以进入系统&#xff0c;在物理世界里&#xff0c;有点类似于“拿工卡刷门禁”的…

homework 2024.06.17 math, UI

A的宽度225 B的宽度150 这样画出来就比较标准&#xff0c; 225 * 2 150 * 3 2A 3B

【排序算法】希尔排序详解(C语言)

文章目录 前言希尔排序的原理原理思路 代码实现希尔排序的相关问题效率算法稳定性 前言 为什么会有希尔排序&#xff0c;要从插入排序说起&#xff0c;希尔排序一开始设计出来是为了改进插入排序&#xff0c;因为插入排序在处理大量数据时效率不高&#xff0c;特别是对于近乎有…