-
CSS 设置孙节点高度等于父节点
HTML 节点结构如下：需设置abc高度与最外层div一直。 示例代码最外层高度只是假设，真实场景往往都是height: 100%。 <div style="height: 300px">
-
CSS iframe 高度 100% 后出现纵向滚动条
现象 当设置了iframe高度100%，理想情况是没有纵向滚动条，但仍然出现了滚动条，设置99%后滚动条消失。 原始代码 <iframe src="1.pdf" width="100%" heigh
-
CSS Grid 布局元素横跨两列
grid-column grid-column: 2 / span 2; grid-column: span 2; /* 跨两列 */ 等价写法 grid-column-start: auto;
-
CSS Grid 布局 grid-template-columns 超出浏览器宽度解决方法
现象 Grid的item默认min-width: auto，会让项目的最小宽度基于内容，导致换行/收缩受限。 在Grid中，1fr列的最小宽度会默认取min-content size（也受item的
-
CSS scrollIntoView 时设置顶部距离
需求 使用xxxElement.scrollIntoView时会直接滑动到父容器的直接底部，需改为留出一定距离。 CSS 使用scroll-margin-top指定scrollIntoView在滑动
2026-02-07, Views: 417 , Topics: CSS
-
React CSS 内联样式
代码 export default function GlobalStyle() { return ( <style global jsx>{` ht
-
CSS 移动端键盘弹出时布局被压缩
现象 页面背景图在键盘弹出时被压缩。 使用的是Flex布局。 解决 在布局父容器添加样式。 使用适配移动端的dvh。动态View Point。 dvh中的第一个d是动态的意思（Dynamic）。 .
-
CSS Nesting 原生嵌套语法
语法 类似与Sass嵌套语法， parent { /* 父样式 */ child { /* 父级的子样式 */ } } parent { /* 父样式 */ & chi
2025-11-13, Views: 500 , Topics: CSS
-
CSS 伪类选择器 :last-child :last-of-type
:last-child 语法 :last-child { /* ... */ } 示例 <li>4</li>将获得样式。 li:last-child { border: 2px solid
2025-11-12, Views: 602 , Topics: CSS
-
CSS 伪类选择器 :first-child() 和 :first-of-type()
:first-child() 表示在一组兄弟元素中的第一个元素。 语法 :first-child { /* ... */ } 示例 只有第一个<li>1</li>有border样式。 li:f
2025-11-11, Views: 558 , Topics: CSS
-
CSS 伪类选择器 :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type()
:nth-child() 根据父元素内的所有兄弟元素的位置来选择子元素。 子元素的计数包括任何元素类型的兄弟子元素。 但是只有当该子元素位置上的元素与选择器的其他组件匹配时，才被视为匹配。 语法 以
2025-11-10, Views: 679 , Topics: CSS
-
CSS 伪类选择器 :not()
概念 :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 语法 :not(选择器列表
2025-11-09, Views: 518 , Topics: CSS
-
CSS 伪类选择器 :has()
引入时间 Baseline 2023 优先级 :has()伪类的优先级计算方法与:is()和:not()相同。 语法 :has(相对选择器) { /* ... */ } 示例 含义：h1后面紧
2025-11-08, Views: 573 , Topics: CSS
-
CSS 伪类选择器 :where()
:where() 和 :is() 的区别 :where()的优先级总是为0，而:is()会计入整个选择器的优先级（它采用其最具体参数的优先级）。 语法 :where(选择器列表) { /* ..
2025-11-07, Views: 562 , Topics: CSS
-
CSS 伪类选择器 :is()
备注 最初该选择器被命名为:matches()（以及:any()），但在 CSSWG issue #3258 中被重命名为:is()。 伪元素在:is()的选择器列表中无效。 :is() 和 :wh
2025-11-06, Views: 585 , Topics: CSS
-
CSS 选择器的优先级
三位数 一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数： ID：选择器中包含ID选择器则百位得一分。 类：选择器中包含类选择器、
2025-11-05, Views: 609 , Topics: CSS
-
CSS 关系选择器 + 接续兄弟组合器
接续兄弟组合器 Next-sibling combinator 符号：+，使用加号表示接续兄弟组合器。 The next-sibling combinator (+) separates two
2025-11-04, Views: 605 , Topics: CSS
-
CSS 关系选择器 ~ 后续兄弟选择器
后续兄弟选择器 Subsequent-sibling combinator 符号：~，使用波浪号表示后续兄弟选择器。 The subsequent-sibling combinator (~, a
2025-11-03, Views: 537 , Topics: CSS
-
CSS 关系选择器 > 子组合器
子组合器 child combinator 符号：>，使用大于符号表示子组合器。 The child combinator (>) is placed between two CSS select
2025-11-02, Views: 545 , Topics: CSS
-
Next.js CSS Module 全局样式穿透解决样式不生效问题
场景 场景一 引入的highlight.css代码高亮样式无效。 场景二 使用JavaScript动态添加的样式不生效。 原因 场景一 使用了page.module.css模块化样式，Next.js