关于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');

兼容性

相关推荐
zhanshuo4 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang5 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil7 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录14 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672214 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少19 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫