css收集 - 技术栈

css收集

yzp01122025-12-19 9:34

文章目录

[:active 元素激活状态](#:active 元素激活状态)
[:first-child 第一个子元素](#:first-child 第一个子元素)
[:nth-child() 选择指定的子元素](#:nth-child() 选择指定的子元素)
[:not() 反向选择器](#:not() 反向选择器)
[@media 响应式媒体查询](#@media 响应式媒体查询)
[@supports 特性检测查询](#@supports 特性检测查询)
[var() css自定义变量使用](#var() css自定义变量使用)
[calc() 动态值计算](#calc() 动态值计算)
[min() max() 动态取值函数](#min() max() 动态取值函数)
[clamp() 响应式取值函数](#clamp() 响应式取值函数)
[:hover 鼠标悬停状态](#:hover 鼠标悬停状态)
[:focus 元素获取焦点状态](#:focus 元素获取焦点状态)

:active 元素激活状态

css 复制代码

button:active{
	transform:scale(1.2);
}

:first-child 第一个子元素

css 复制代码

li:first-child{
	color:yellow;
}

:nth-child() 选择指定的子元素

复制代码

奇数位置的列表项（<li> 元素）设置红色背景
li:nth-child(odd){
background:red;
}

:not() 反向选择器

css 复制代码

div:not(.add){
	opacity:0.8;
}

@media 响应式媒体查询

css 复制代码

@media (max-width:768px){

}

@supports 特性检测查询

css 复制代码

/* 检测浏览器是否支持Grid布局 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  /* 可以在这里放置所有依赖Grid的样式 */
}

var() css自定义变量使用

css 复制代码

color:var(--primary-color)

calc() 动态值计算

css 复制代码

width:calc(100% / 3)

min() max() 动态取值函数

css 复制代码

width:max(300px,60%)

clamp() 响应式取值函数

css 复制代码

font-size:clamp(1rem,1vw,2rem)

:hover 鼠标悬停状态

css 复制代码

button:hover{
	
}

:focus 元素获取焦点状态

css 复制代码

input:focus{}