-
CSS 伪类选择器 :last-child :last-of-type
:last-child 语法 :last-child { /* ... */ } 示例 <li>4</li>将获得样式。 li:last-child { border: 2px solid
2025-11-12, Views: 10 , Topics: CSS
-
CSS 伪类选择器 :first-child() 和 :first-of-type()
:first-child() 表示在一组兄弟元素中的第一个元素。 语法 :first-child { /* ... */ } 示例 只有第一个<li>1</li>有border样式。 li:f
2025-11-11, Views: 23 , Topics: CSS
-
CSS 伪类选择器 :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()
:nth-child() 根据父元素内的所有兄弟元素的位置来选择子元素。 子元素的计数包括任何元素类型的兄弟子元素。 但是只有当该子元素位置上的元素与选择器的其他组件匹配时，才被视为匹配。 语法 以
2025-11-10, Views: 32 , Topics: CSS
-
CSS 伪类选择器 :not()
概念 :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 语法 :not(选择器列表
2025-11-09, Views: 32 , Topics: CSS
-
CSS 伪类选择器 :has()
引入时间 Baseline 2023 优先级 :has()伪类的优先级计算方法与:is()和:not()相同。 语法 :has(相对选择器) { /* ... */ } 示例 含义：h1后面紧
2025-11-08, Views: 44 , Topics: CSS
-
CSS 伪类选择器 :where()
:where() 和 :is() 的区别 :where()的优先级总是为0，而:is()会计入整个选择器的优先级（它采用其最具体参数的优先级）。 语法 :where(选择器列表) { /* ..
2025-11-07, Views: 45 , Topics: CSS
-
CSS 伪类选择器 :is()
备注 最初该选择器被命名为:matches()（以及:any()），但在 CSSWG issue #3258 中被重命名为:is()。 伪元素在:is()的选择器列表中无效。 :is() 和 :wh
2025-11-06, Views: 50 , Topics: CSS
-
CSS 选择器的优先级
三位数 一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数： ID：选择器中包含ID选择器则百位得一分。 类：选择器中包含类选择器、
2025-11-05, Views: 57 , Topics: CSS
-
CSS 关系选择器 + 接续兄弟组合器
接续兄弟组合器 Next-sibling combinator 符号：+，使用加号表示接续兄弟组合器。 The next-sibling combinator (+) separates two
2025-11-04, Views: 70 , Topics: CSS
-
CSS 关系选择器 ~ 后续兄弟选择器
后续兄弟选择器 Subsequent-sibling combinator 符号：~，使用波浪号表示后续兄弟选择器。 The subsequent-sibling combinator (~, a
2025-11-03, Views: 68 , Topics: CSS
-
CSS 关系选择器 > 子组合器
子组合器 child combinator 符号：>，使用大于符号表示子组合器。 The child combinator (>) is placed between two CSS select
2025-11-02, Views: 69 , Topics: CSS
-
Next.js CSS Module 全局样式穿透解决样式不生效问题
场景 场景一 引入的highlight.css代码高亮样式无效。 场景二 使用JavaScript动态添加的样式不生效。 原因 场景一 使用了page.module.css模块化样式，Next.js
-
CSS 使用 flex-shrink 0 解决 flex 1 布局中元素设置的高度不生效问题
现象 代码 .container { flex: 1; overflow-y: scroll; } 原因 flex: 1依赖容器高度，没有容器高度，flex: 1会无限拉伸，把元素
2025-10-03, Views: 233 , Topics: CSS
-
Tailwind CSS 在微信开发者工具中不生效问题
现象 前端使用了Tailwind4开发网页应用H5，在原生浏览器和手机浏览器都生效，但是在微信开发者工具中，Tailwind的样式都不生效。 原因 Tailwind CSS默认使用了CSS的@lay
-
JavaScript 与 CSS 实现自定义 Toast 弹框提醒
CSS 居中显示。 .toast { position: fixed; z-index: 1; top: 50%; left: 50%; transform:
2025-09-18, Views: 488 , Topics: JavaScript CSS
-
JavaScript 获取 CSS 中定义的变量
需求 动态获取CSS中定义的主颜色。 CSS #root { --color: red; } .my-div { --color: red; } JavaScript 使用get
2025-09-17, Views: 482 , Topics: JavaScript CSS
-
CSS 实现加载中旋转进度条
CSS /* 外层容器：让 Loading 垂直+水平居中（可根据需求调整） */ .loadingContainer { user-select: none; flex:1;
2025-09-09, Views: 622 , Topics: CSS
-
CSS 相同元素间添加逗号隔开但最后一个元素后不添加逗号
需求 相同的元素将添加分隔符，最后一个元素后面不添加。 代码 使用:not伪类，并传入:last-child，表明除了最后一个元素，都生效。 再使用::after伪类，追加内容，使用margin指定
2025-09-08, Views: 637 , Topics: CSS
-
CSS 块元素、行内元素、行内块元素
主要区别 是否独占一行 能否设置宽高 块元素 Block Elements 独占一行，支持宽高设置，可容纳其他块级元素，盒子模型完整生效。 结构类 <div> <p> <ul> <ol> <l
2025-09-07, Views: 680 , Topics: CSS
-
CSS 垂直水平居中
absolute + transform <style> .center { position: absolute; top: 50%; le
2025-09-06, Views: 632 , Topics: CSS