跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

已标记的文章
:has

10 篇文章
{
,

}
:has CSS selector
指向文章“CSS 中 :has() 的力量”的直接链接
:has CSS

CSS 中 :has() 的力量

嘿,所有了不起的开发者!在这篇文章中,我们将探索在下一个 Web 项目中使用:has()。:has() 比较新,但它通过提供控制... 在前端社区中获得了普及。

Avatar of Chris DeMars
Chris DeMars 于 2024 年 4 月 19 日
指向文章“:has() 的更多实际应用”的直接链接
:has

:has() 的更多实际应用

:has() 伪类 是我毫无疑问最喜欢的新的 CSS 功能。我知道它也是很多人的最爱,至少是 参加了 CSS 状态调查的那些人。能够反向编写选择器...

Avatar of Liam Johnston
Liam Johnston 于 2023 年 1 月 23 日
指向文章“使用 :has() 解决:长篇文本中的垂直间距”的直接链接
:has 排版

使用 :has() 解决:长篇文本中的垂直间距

如果您曾经在包含大量 长篇文本 的网站上工作过,尤其是那些人们可以在 WYSIWYG 编辑器中输入大量文本的 CMS 网站,那么您可能不得不编写 CSS 来管理不同... 之间的垂直间距。

Avatar of Liam Johnston
Liam Johnston 于 2023 年 1 月 18 日
指向文章“:has 是一个不宽容的选择器”的直接链接
:has :is :where 特异性

:has 是一个不宽容的选择器

在将 CSS :has() 选择器 发布到老式年鉴的途中发生了一件小事。我最初将 :has() 描述为一个“宽容”的选择器,其想法是其参数中的任何内容都会被评估,即使一个或...

Avatar of Geoff Graham
Geoff Graham 于 2023 年 1 月 11 日
指向文章“使用 BEM 和现代 CSS 选择器驯服级联”的直接链接
:has :is :where BEM 级联 特异性

使用 BEM 和现代 CSS 选择器驯服级联

BEM。就像前端开发世界中看似所有技术一样,以 BEM 格式编写 CSS 可能会产生两极分化。但它至少在我的 Twitter 泡泡中是更受欢迎的 CSS 方法之一。

就我个人而言,我认为...

Avatar of Liam Johnston
Liam Johnston 于 2023 年 1 月 17 日
指向文章“使用 :has() 关系伪类创建动画可点击卡片”的直接链接
:has 伪元素

使用 :has() 关系伪类创建动画可点击卡片

CSS :has() 伪类正在许多浏览器中推出,Chrome 和 Safari 已经完全支持它。它通常被称为“父选择器”,就像我们可以从... 选择样式父元素一样。

Avatar of Brecht De Ruyte
Brecht De Ruyte 于 2022 年 10 月 27 日
指向文章“隐式网格、可重复的布局模式和悬空元素”的直接链接
:has 网格 隐式网格 nth-child

隐式网格、可重复的布局模式和悬空元素

Dave Rupert 使用一些现代 CSS 技巧 来解决经典难题之一:当组件的 CSS 无法处理我们传递给它的内容时会发生什么?

具体情况是,当布局网格期望...

Avatar of Geoff Graham
Geoff Graham 于 2022 年 8 月 2 日
指向文章“认识 `:has`,一个原生 CSS 父选择器”的直接链接
:has 父选择器

认识 `:has`,一个原生 CSS 父选择器

通常被引用的导致容器查询变得困难或不可能的原因是诸如无限循环之类的因素,例如:更改元素的宽度,使容器查询失效,这反过来会再次更改宽度,导致容器查询生效,...

Avatar of Chris Coyier
Chris Coyier 于 2021 年 7 月 12 日
指向文章“我能 :has() 吗”的直接链接
:has 父选择器

我能 :has() 吗

我刚开玩笑说 我们基本上以超快速度获得了我们想要的 CSS(主要指的是 容器查询,天哪,你能想象它们真的要来了吗?)。现在我们 可能真的要获得父选择器了?! 就像 .parent:has(.child) { ...

Avatar of Chris Coyier
Chris Coyier 于 2021 年 6 月 4 日
  • 1
  • 2
  • 更早的

CSS-Tricks 由 DigitalOcean 提供支持。

使用我们精心制作的时事通讯,

随时了解 Web 开发的最新动态。

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获得免费积分!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.