关于css 的选择器和 css变量

css 选择器

常用的选择器

1. 后代选择器:也就是我们常见的空格选择器,选择的对象为该元素下的所有子元素 。例如,选择所有
元素下的

元素

	div p{font-size:14px}

2. 子元素选择器 ‘>’ 选择某元素下的直接子元素。例如,选择所有
元素的直接子元素

:div > p { … }

	div > p{font-size:14px}

3. 相邻兄弟选择器:+ 用于选择某个元素的下一个兄弟元素。例如,选择所有

元素后面紧邻的

元素:h2 + p { … }

	div + p{font-size:14px}

4. 一般兄弟选择器:~ 用于选择某个元素后面的所有兄弟元素。例如选择所有 h2元素后面的所有 p元素:h2 ~ p { … }

	div ~ p{font-size:14px}

常见的选择器

1.通用选择器(Universal Selector):* 用于选择所有元素。例如,* { … } 会影响到页面上的所有元素。

2.分组选择器(Grouping Selector):逗号 , 用于将多个选择器组合在一起,以便同时选择多个不同的元素。例如,h1, h2, h3 { … } 会选择所有 h1、h2 和 h3 元素并为它们应用相同的样式。

3.伪类选择器(Pseudo-class Selector):伪类选择器用于选择元素的特定状态或位置,例如 :hover 用于选择鼠标悬停在元素上时的状态。

4.伪元素选择器(Pseudo-element Selector):伪元素选择器用于选择元素的特定部分,例如 ::before 用于在元素前面插入内容。

5.属性选择器(Attribute Selector):用于选择带有特定属性或属性值的元素。例如,[data-attribute=“value”] 可以选择所有具有特定数据属性的元素。

6.结构性伪类选择器(Structural Pseudo-class Selector):这些选择器用于选择元素的结构性信息,例如 :first-child 选择第一个子元素,:nth-child() 选择指定位置的子元素等。

其他的伪类选择器::nth-of-type :nth-last-of-type,:first-of-type 和 :last-of-type :nth-child(odd)(奇数) :nth-child(even)(偶数)

7.目标伪类选择器(:target):用于选择具有特定目标标识符的元素,通常与锚点链接一起使用。

8. 空选择器(:empty):用于选择没有子元素的元素。

9. 否定伪类选择器(:not):用于排除满足某些条件的元素,例如 :not(.classname) 会选择所有不具有指定类名的元素。

css 变量

简述:也称为自定义属性(Custom Properties),是一种在 CSS 中定义和使用的值,可以在整个样式表中重复使用。CSS 变量以 – 开头,后面跟着变量名,并通过 var() 函数来使用。使用 CSS 变量可以使样式更具可维护性和灵活性,因为你可以在一个地方定义变量,然后在需要的地方引用它们。

定义变量

定义变量:在需要的选择器中使用 – 前缀来定义变量。例如:

:root {--primary-color: #007bff;--font-size: 16px;
}

使用变量

使用变量:你可以在任何选择器中使用 var() 函数来引用定义的变量。例如:

background-color: var(--primary-color);font-size: var(--font-size);

Q:用途
R:可以用来自定义主题
Q: 如何使用js更改自定义主题
R:

 // 获取根元素的样式属性const rootStyles = getComputedStyle(document.documentElement);// 获取变量的值const primaryColor = rootStyles.getPropertyValue('--primary-color');// 修改变量的值document.documentElement.style.setProperty('--primary-color', 'red');

兼容性

在这里插入图片描述

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

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

相关文章

数据分析师所要经历的三个阶段

数据分析师如今逐渐已经成为一个热门的岗位,在这个流量为王的年代,数据的重要性也日益增高,许多企业都是意识到了这一点,纷纷开始招募相关的数据型人才。 数据分析师的基本职业发展道路为:初级数据分析师-中级数据分析…

Java算法_ BST 中第 k 个最小元素 (LeetCode_Hot100)

题目描述:给定一个二叉搜索树的根节点 ,和一个整数 ,请你设计一个算法查找其中第 个最小元素(从 1 开始计数)。 获得更多?算法思路:代码文档,算法解析的私得。 运行效果 完整代码 /*** 2 * Aut…

LeetCode150道面试经典题-- 二叉树的最大深度(简单)

1.题目 给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 2.示例 3.思路 深度优先遍历 一个二叉树要查询到最大深度,可以将问题转为从根节点出发,查看左右子树的最大深度&am…

并发编程5:如何执行任务?

目录 1、线程中执行任务的方式 2、Executor 框架 2.1 - 线程的执行策略 2.2 - 线程池 2.3 - Executor 的生命周期 2.4 - 延任务与周期任务 3、找出可利用的并行性-代码示例 3.1 - 单线程的 I/O 操作 3.2 - 携带任务结果的 Callable 与 Future(重要&#xf…

基于swing的教务管理系统java jsp学生教师信息mysql源代码

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 基于swing的教务管理系统 系统有3权限:管…

c++ qt--信号与槽(一) (第三部分)

c qt–信号与槽(一) (第三部分) 一.用qt自带的方法添加信号槽 1.第一种 1.如何添加 2.在何处进行绑定 2.第二种 1.如何添加 2.在何处进行绑定 而且会在mainwindow.h中添加槽函数的声明,在mainwindow.cpp中添加槽函数的定义 在mainwindow…

【线性DP】模型总结(terse版)

【线性DP】模型总结 最长上升子序列 DP法 ​ dp[i]表示以i结尾的最长上升子序列的长度。 ​ 对于每个i&#xff0c;遍历j1~i-1,若a[j] < a[i], 则dp[i] max(dp[i], dp[j] 1); 二分法 ​ 可以优化时间复杂度。 ​ dp[]数组用来存储当前最长上升子序列。 ​ 若dp[]数…

伦敦银和伦敦金的区别

伦敦银河伦敦金并称贵金属交易市场的双璧&#xff0c;一般投资贵金属的投资者其实不是交易伦敦金就是交易伦敦银。相信经过一段时间的学习和投资&#xff0c;不少投资者都能分辨二者的区别。下面我们就来谈谈伦敦银和伦敦金有什么异同&#xff0c;他们在投资上是否有差别。 交易…

vue与vueComponent的关系

创建完组件之后 就会创建一个vueComponent构造函数 当注册成功这个组件并且在页面使用之后 就会创建一个vueComponent实例对象&#xff0c; 所以为了避免组件在使用过程中data对象中的值混乱 组件中的data要写成函数&#xff0c; 使得每次创建的组件实例对象都可以返回一…

Sui第四轮资助:16个团队瓜分

近日&#xff0c;Sui基金会公布了第四轮开发者资助名单&#xff0c;受助项目均是集中在DeFi、支付、基础设施、游戏、预言机等领域的Sui生态项目&#xff0c;他们是从2023年7月1日之前提交的申请中选出的。在此时间之后提交的任何项目目前正在审查中。 在前三轮资助中累积发放…

Linux存储学习笔记

相关文章 Linux 存储系列&#xff5c;请描述一下文件的 io 栈&#xff1f; - tcpisopen的文章 - 知乎 https://zhuanlan.zhihu.com/p/478443978 深入学习 Linux 操作系统的存储 IO 堆栈 - KaiwuDB的文章 - 知乎 https://zhuanlan.zhihu.com/p/636720297 linux存储栈概览 - st…

2023 Android 折叠屏适配详解,是时候点亮新技能了

自 2019 年三星发布了第一台&#xff08;柔宇不算&#xff09; Galaxy Z Fold 之后&#xff0c;Android 厂商们都陆续跟进了各自的可折叠方案&#xff0c;之后折叠屏手机市场一直保持快速增长&#xff0c;例如 2023 年上半年整体销量 227 万台&#xff0c;同比增长 102.0%。 虽…

pytorch 入门1-tensor 广播 view reshape

tensor 的四则运算broadcast import torch import numpy as np # 张量tensor 随机初始化 x torch.rand(4,3) print(x) y torch.randn(4,3) print(y)# 初始化全零 张量 a torch.zeros((4,4),dtypetorch.long) print(a) #初始化全一 张量 b torch.ones(4,4) print(b) c tor…

【tkinter 专栏】鼠标事件处理

文章目录 前言本章内容导图1. 鼠标事件2. 键盘事件3. 一次绑定多个事件处理程序4. 取消事件的绑定前言 本专栏将参考《Python GUI 设计 tkinter 从入门到实践》书籍(吉林大学出版社 ISBN: 9787569275001)所整理的 Python GUI 设计内容,结合笔者自身在项目实践过程中对于 GU…

Spring相关知识

0、Spring的核心就是AOP和IOC IOC&#xff1a; AOP&#xff1a;AOP&#xff08;Aspect Oriented Programming&#xff09;是面向切面编程&#xff0c;它是一种编程思想&#xff0c;是面向对象编程&#xff08;OOP&#xff09;的一种补充。面向对象编程将程序抽象成各个层次的…

5、css学习5(链接、列表)

1、css可以设置链接的四种状态样式。 a:link - 正常&#xff0c;未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻 2、 a:hover 必须在 a:link 和 a:visited 之后&#xff0c; a:active 必须在 a:hover 之后&…

【C语言每日一题】01. Hello, World!

题目来源&#xff1a;http://noi.openjudge.cn/ch0101/01/ 01. Hello, World! 总时间限制: 1000ms 内存限制: 65536kB 问题描述 对于大部分编程语言来说&#xff0c;编写一个能够输出“Hello, World!”的程序往往是最基本、最简单的。因此&#xff0c;这个程序常常作为一个初…

【广州华锐互动】VR工厂消防安全演习提供了一种全新、生动的安全教育方式

在工业生产环境中&#xff0c;安全永远是首要的考虑因素。近年来&#xff0c;随着科技的发展&#xff0c;虚拟现实(VR)技术在各种领域的应用越来越广泛&#xff0c;包括教育和培训。其中&#xff0c;VR工厂消防安全演习就是一个典型的例子&#xff0c;它为员工提供了一种全新的…

关于目标检测鼻祖R-CNN论文

R-CNN系列论文是使用深度学习进行物体检测的鼻祖论文&#xff0c;其中fast-RCNN 以及faster-RCNN都是沿袭R-CNN的思路。R-CNN全称region with CNN features&#xff0c;其实它的名字就是一个很好的解释。用CNN提取出Region Proposals中的featues&#xff0c;然后进行SVM分类与b…

手搭手入门MyBatis-Plus

MyBatis-Plus Mybatis-Plus介绍 为简化开发而生 MyBatis-Plus(opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis(opens new window) 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 特性 无侵入&#…