当前位置：首页 > news >正文

3 html5之css新选择器和属性

news 2025/7/7 19:07:56

要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。

1 新增的一些写法：

1.1 导入css

这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。

<style>@import url("css/style.css");</style>

1.2 变量和函数

变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。

函数这里重点谈一下。

attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。

官方说主要是为了给伪类中content做内容使用，经过测试color属性使用attr我这里不生效。其余可以生效。

 <div class="btn2" data-color="red" width="200px">按钮</div>....btn2 {width: attr(width);height: 30px;line-height: 30px;text-align: center;color: #fff;background-color: var(--parimaryColor);background-color: attr(data-color); /*这里的颜色不被支持*/cursor: pointer;}

rgb/rgba函数：这两个大家可能用的比较多。不过还能像大家在less或者这sass里面直接写十六进制值。

background-color: rgba(100, 1000, 100, 0.5);background-color: rgba(red, 0.5); // 这样写不被支持
background-color: rgba(#f60, 0.5); // 这样写不被支持

计算类函数：这主要包括calc,min,max等

width : max ( 10vw , 4em , 80px );

渐变颜色类函数：这个后面专门出个文章再来写。

三角函数： sin/cos等用的不多。

counter()和counters(): 计数器

<style>article {counter-reset: paragraph; /* 初始化计数器 */}article p:before {content: counter(paragraph) ". "; /* 显示计数器值 */counter-increment: paragraph; /* 每个段落后计数器递增 */}</style></head><article><p>这是第一段。</p><p>这是第二段。</p><p>这是第三段。</p></article>

2 新的选择器

2.1 并集选择器(交集选择器)

这是我自己取得名字，写法就是必须没有空格连在一起，表示多个选择器同时存在才会生效的选择器。

<style>.style1{background-color: #f60;width: 100px;height: 100px;}.style2 {background-color: red;width: 100px;height: 100px;}.style1.style2 {background-color: green;width: 100px;height: 100px;}</style>
</head><div class="style1">风格样式1</div><div class="style2">风格样式2</div></div><div class="style1 style2">两个风格同时存在</div>

2.2 伪类选择器

1 :root 选择文档的根元素，即<html>元素

2 :empty 选择没有子元素的元素（包括文本节点）。注意，空格和换行符也被视为子节点，因此这些元素不会被视为空。

3 :has() 它允许你选择包含特定子元素的父元素。这个选择器可以用于更精确地控制样式，而不需要改变HTML结构。

/* 选择包含有.child类的元素 */
.parent:has(.child) {/* 样式规则 */
}

4 :focus 选择获得焦点的元素
常用于表单输入元素（如文本框、单选按钮、复选框等）上，以指示当前哪个元素处于激活状态

5 :enabled和:disabled 分别选择启用和禁用的表单元素（如输入框、按钮等）
这对于提高表单的可用性和清晰度非常有用

6 :checked 选择被选中的<input type="radio">、<input type="checkbox">或<option>元素
这允许你为选中状态提供自定义样式

7 :read-only和:read-write 分别选择只读和可编辑的表单元素（如文本框）
这些伪类可以帮助你区分不同状态的表单元素，并相应地调整它们的样式

8 :valid和:invalid 分别选择通过验证和未通过验证的表单元素
这些伪类对于实现表单验证反馈非常有用，可以直观地告诉用户哪些字段需要更正
9 :required和:optional 分别选择被标记为必填和可选的表单元素
这些伪类可以帮助你为不同类型的表单字段提供不同的样式或提示

2.3 浏览器滚动条相关

::-webkit-scrollbar系列注意也支持相关伪类比如:hover，也可以通过父类约束范围。
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-button: 两端的按钮
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有 Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

::-webkit-scrollbar {// width: 0 !important;background: transparent;// height: 0 !important;}::-webkit-scrollbar-button {// width: 0 !important;background-color: transparent;// height: 0 !important;}::-webkit-scrollbar-corner {background-color: transparent;}::-webkit-scrollbar-thumb {background: #333; /* 滚动条颜色 */border-radius: 2px; /* 定义滑块的圆角 */}/* 设置滚动条轨道的颜色 */::-webkit-scrollbar-track {background: transparent; /* 滚动条轨道颜色 */}/* 定义滚动条滑块悬停样式 */::-webkit-scrollbar-thumb:hover {background-color: #333; /* 定义滑块在悬停状态下的颜色 */}

2.4 特殊伪元素选择器

1 ::before 和 ::after 这个和常见，可以在元素的内容前后插入生成的内容。

2 ::first-letter 和 ::first-line 可以选择文本的第一个字母或者第一行。

3 :focus-within 当元素本身或其后代元素获得焦点时， :focus-within 伪类的元素就会有效。

 <style>/* 定义表单样式 */.form-container {border: 2px solid #ccc;padding: 20px;margin: 20px;}/* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */.form-container:focus-within {border-color: blue;}</style><!-- HTML 结构 --><div class="form-container"><label for="username">用户名:</label><input type="text" id="username" name="username" /><label for="email">邮箱:</label><input type="email" id="email" name="email" /><button type="submit">提交</button></div>

4 :focus-visible 当元素通过键盘（例如 Tab 键）获得焦点时，显示不同的样式

<style>/* 定义表单样式 */.form-container {border: 2px solid #ccc;padding: 20px;margin: 20px;}/* 当表单内的任意元素获得焦点时，改变表单容器的边框颜色 */.form-container:focus-within {border-color: blue;}/* 当元素通过键盘获得焦点时，显示不同的样式 */[tabindex]:focus-visible,input:focus-visible,button:focus-visible {outline: 2px solid red;background-color: yellow;}</style><!-- HTML 结构 --><div class="form-container"><label for="username">用户名:</label><input type="text" id="username" name="username" /><label for="email">邮箱:</label><input type="email" id="email" name="email" /><button type="submit">提交</button></div>

5 :target 是一个 CSS 伪类，用于选择当前 URL 中带有片段标识符（即锚点）的目标元素。当用户点击链接中的锚点时，该伪类可以选择并样式化目标元素。

6 :selection 是一个 CSS 伪元素，用于选择文档中被用户选中的文本。它可以用来定义选中文本的样式，如背景色和文字颜色。

3 新增的属性

css3 甚至后面的css4预案也新增了一些css属性：

其中flex 和grid后面开专题去讲。

1 gap

在CSS中，gap 属性主要用于Flexbox和Grid布局中，用于控制项目之间的空间。

`2 hyphens`

属性用于控制文本中的自动断字（即自动插入连字符）。这对于长单词或跨行的文字尤其有用，可以提高文本的可读性和排版质量。这个很有用。他有三个属性值：

p { hyphens: none; } // 不断行

p { hyphens: manual; } // 只在手动插入的连字符位置进行断字。

p { hyphens: auto; } // 自动在合适的位置插入连字符以实现断字。

 <style>p {hyphens: auto; /* 启用自动断字 */word-wrap: break-word; /* 允许长单词换行 */}</style><p>This is a sample paragraph with a verylongwordthatshouldbebroken todemonstrate the hyphens property.</p>

会根据页面宽度自适应断行

3 `content-visibility`

这个属性可以延迟渲染非首屏内容，优化加载性能。

4 控制文本方向

unicode-bidi: 该属性用于控制文本在双向文本环境中的重写行为，它有多个值可以选择，比如 normal, isolate, isolate-override, embed, embed-override 等。

unicode-bidi 通常与 direction 属性一起使用，以更精细地控制文本的方向。
text-orientation: 它可以取值 mixed 或 upright。

writing-mode: 属性值有：

horizontal-tb: 水平书写模式，默认值。
vertical-rl: 从右向左的垂直书写模式。
vertical-lr: 从左向右的垂直书写模式。

5 文本相关

1 -webkit-line-clamp：多行文本溢出，但要注意其Webkit特性的局限性。

.flex-multi-line-ellipsis {display: flex;flex-direction: column;line-clamp: 3; /* 需要JavaScript支持 */overflow: hidden;
}

2 text-decoration属性这个属性以前就有，只不过多了很多修饰的属性：
text-decoration-line设置文本装饰线的位置
none：指定文字无装饰
underline ：指定文字装饰下划线
overline ：指定文字装饰上划线
line-through ：指定文字的装饰是贯穿线

text-decoration-style 文本装饰线条形状
solid ：实线
double ：双实线
dotted ：点状线条
dashed ：虚线
wavy ：波浪线

text-decoration-color 文本装饰线条颜色

3 文本描边(仅webkit内核浏览器能支持)

-webkit-text-stroke-width：设置文本描边的宽度，写长度值
-webkit-text-stroke-color ：设置文本描边的颜色，写颜色值
-webkit-text-stroke ：复合属性，设置文字描边的宽度和颜色值

4 shape-outside: 允许文本环绕不规则形状的元素，为文本布局和设计开辟了新的可能性。

5 text-align-last: Text-align-last 指定块或行的最后一行（强制换行符之前）如何在其容器内对齐。

6 outline 轮廓

outline-width ：外轮廓宽度
outline-color ：外轮廓颜色
outline-style ：外轮廓风格
none ：无轮廓
dotted ：点状轮廓
solid ：实线轮廓
double ：双实线轮廓
outline-offest：设置外轮廓与边框的距离，正负值都可设置

outline:50px solid blue；

7 bancground渐变色支持：

webkit-background-clip：text 背景呈现在文字上。

border-image: 实现描边效果,但是不支持圆角。

        border-image-source: linear-gradient(to right, red, #578aef);
        border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */
        border-image-repeat: stretch; /* 控制边框图片的重复方式 */

    <style>.box2 {width: 400px;height: 100px;margin: 100px auto;border-radius: 10px;/* 去除之前的边框设置 *//* 添加 border-image 属性 */border: 5px solid;border-image-source: linear-gradient(to right, red, #578aef);border-image-slice: 1; /* 可以调整以控制渐变重复的次数 */border-image-repeat: stretch; /* 控制边框图片的重复方式 */}</style><div class="box2"></div>

1. 线性渐变（Linear Gradients）
线性渐变是从一个方向到另一个方向的渐变效果。你可以指定一个起点和一个方向（或一个角度），并且至少定义两个颜色结点。
to right：从左到右。
to bottom right：从左上到右下。
角度：如 45deg 表示从45度方向开始渐变。

div {background-image: linear-gradient(to right, red, yellow);
}

多个叠加

<style>body {background-color: #f60;}.rectangle {width: 305px;height: 75px;background: linear-gradient(-45deg, transparent 52px, #ffffff 0) bottomright,linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;background-size: 100% 100%;background-repeat: no-repeat;}</style></head><body><div class="rectangle"></div></body>

2 径向渐变（Radial Gradients）

径向渐变是从一个中心点向外扩散的渐变效果。

circle：圆形。
ellipse：椭圆形。
closest-side：形状大小直到最近的一边。
farthest-side：形状大小直到最远的一边。
closest-corner：形状大小直到最近的角落。
farthest-corner：形状大小直到最远的角落。

div {background-image: radial-gradient(circle, red, yellow, green);
}

3 圆锥渐变（Conic Gradients）

圆锥渐变是围绕一个中心点旋转的渐变效果。

div {background-image: conic-gradient(from 45deg, red, yellow, green, blue);
}

下面举几个例子：

1 渐变文字

.box {width: 400px;background-image: linear-gradient(red, yellow, green);font-size: 80px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;font-size: 50px;-webkit-background-clip: text;}

2 渐变边框

<style>.box2 {position: relative;width: 400px;height: 100px;margin: 100px auto;border-radius: 10px;background: #fff;background-clip: padding-box;border: 5px solid transparent;}.box2::before {content: "";position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: -1;margin: -5px;border-radius: 10px;background: linear-gradient(to right, red, #578aef);}.box1 {width: 400px;background-image: linear-gradient(to right, red, #578aef);font-size: 80px;text-align: center;line-height: 100px;font-weight: bold;color: transparent;-webkit-background-clip: text;}</style></head><body><div class="box2"><div class="box1">渐变文字</div></div></body>

3 网格背景

8 css事件相关

1 pointer-events 控制事件响应

pointer-events: auto;：元素是鼠标事件的目标，事件会被正常处理。

pointer-events: none;：元素不是鼠标事件的目标，点击事件会穿过该元素并在其后面的元素上触发。

pointer-events: visiblePainted;：只适用于 SVG，类似于 auto，但不包括某些不可见的图形元素。

2 scroll-behavior 该属性定义了溢出元素的滚动行为，只需简单的声明即可实现平滑的滚动动画

3 user-select: 控制用户是否可以选择元素内的文本，从而更好地控制用户交互和界面设计

9 变形相关

1 Object-fit 指定如何调整元素内容的大小以适合其容器、保留纵横比并控制溢出行为1

2 Transform: 支持的函数也比较多，大家常用的有rotate旋转/scale缩放/translate移动等，通常结合动画的比较多。

transform垂直水平居中：

 .centered-element {width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #f60;}

10 css滤镜

filter：系列支持的函数有:blur模糊/grayscale灰度这个大家应该用的比较多(重大祭奠会用)

backdrop-filter: 此属性将图形效果（例如模糊或色移）应用于元素内容后面的区域。它非常适合创建磨砂玻璃效果或为元素添加微妙的视觉增强效果。

mix-blend-mode：此属性控制元素的内容与其背景混合的方式，提供与图形设计软件中类似的各种混合模式

11 css动画部分

这部分我后面会出专题来讲。包括前面提到的flex弹性盒子,grid布局等，这些相关内容都会分专题来讲。