:has()
伪类 毫无疑问,这是我最喜欢的新 CSS 功能。 我知道这对你们中的许多人来说也是如此,至少 那些参加过 CSS 状态调查的人. 倒写选择器的能力给了我们更多我从未想过的超能力。
我说“更多的超级大国”是因为一群超级聪明的人已经发表了很多非常惊人的聪明想法,比如:
本文不是权威指南 :has()
. 它也不是在这里反省已经说过的话。 只是我 (hi 👋) 赶上潮流来分享一些我最有可能使用的方式 :has()
在我的日常工作中……也就是说,一旦它被 Firefox 正式支持 这是迫在眉睫的.
当这种情况发生时,你可以打赌我会开始使用 :has()
到处都是。 以下是我最近建造的一些真实世界的例子,我心想,“哎呀,一旦它会好得多 :has()
完全支持。”
避免接触到 JavaScript 组件之外
您是否曾经构建过有时需要影响页面其他地方样式的交互式组件? 以下面的例子为例,其中 <nav>
是一个 巨型菜单, 打开它会改变 <header>
上面的内容。
我觉得我需要做这种事 每时每刻.
这个特定示例是我为网站制作的 React 组件。 我不得不“触及”页面的 React 部分 document.querySelector(...)
并在 <body>
, <header>
,或另一个组件。 那不是世界末日,但确实感觉有点恶心。 即使在完全 React 的网站(比如 Next.js 网站)中,我也必须在管理一个 menuIsOpen
声明组件树的更高层,或者进行相同的 DOM 元素选择——这不是很 React-y。
:has()
,问题消失了:
header:has(.megamenu--open) { /* style the header differently if it contains an element with the class ".megamenu--open" */
}
不再需要在我的 JavaScript 组件中摆弄 DOM 的其他部分!
更好的表条带化用户体验
将交替行“条纹”添加到您的表格可以是一个很好的用户体验改进。 它们可以帮助您的眼睛在扫视表格时跟踪您所在的行。
但根据我的经验,这在只有两行或三行的表上效果不佳。 例如,如果您有一个包含三行的表 <tbody>
并且您在每个“偶数”行中“条带化”,最终可能只有一个条纹。 这真的不值得一个模式,并且可能会让用户想知道那个突出显示的行有什么特别之处。
在什么地方使用这种技术 Bramus 使用 :has()
根据孩子的数量应用样式,我们可以在多于三行时应用 tble 条纹:
什么可以变得更漂亮? 您也可以决定仅在表也至少具有一定数量的列时才执行此操作:
table:has(:is(td, th):nth-child(3)) { /* only do stuff if there are three or more columns */
}
从模板中删除条件类逻辑
我经常需要根据页面上的内容更改页面布局。 采用以下网格布局,其中主要内容的放置会根据是否存在侧边栏来更改网格区域。
这可能取决于 CMS 中是否设置了同级页面。 我通常会使用模板逻辑来有条件地添加 BEM 修饰符类 到布局包装器以考虑两种布局。 该 CSS 可能看起来像这样(为简洁起见,省略了响应规则和其他内容):
/* m = main content */
/* s = sidebar */
.standard-page--with-sidebar { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar { grid-template-areas: '. m m m m m m m m m . .';
}
当然,就 CSS 而言,这完全没问题。 但是确实让模板代码有点乱。 根据您的模板语言,有条件地添加一堆类可能会变得非常难看,尤其是当您还必须对很多子元素执行此操作时。
对比一下 :has()
基于方法:
/* m = main content */
/* s = sidebar */
.standard-page:has(.sidebar) { grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) { grid-template-areas: '. m m m m m m m m m . .';
}
老实说,这在 CSS 方面并没有好多少。 但是,如果您问我,从 HTML 模板中删除条件修饰符类是一个很好的胜利。
很容易想到微观设计决策 :has()
- 就像一张卡片,里面有图像 — 但我认为它对这些宏布局更改也非常有用。
更好的特异性管理
如果你读 我的上一篇文章,你会知道我是一个专一的坚持者。 如果像我一样,你不希望你的特异性分数在添加时爆炸 :has()
和 :not()
在你的整个风格中,一定要使用 :where()
.
那是因为它的特殊性 :has()
是基于 其参数列表中最具体的元素. 所以,如果你有类似 ID 的东西,你的选择器将很难在级联中被覆盖。
另一方面, 的特殊性 :where()
总是零,从不增加特异性分数。
/* specificity score: 0,1,0. Same as a .standard-page--with-sidebar modifier class
*/
.standard-page:where(:has(.sidebar)) { /* etc */
}
未来是光明的
这些只是我迫不及待想要在生产中使用的一些东西。 CSS-Tricks Almanac 也有很多例子。 你期待做什么 :has()
? 你遇到过什么样的现实世界的例子 :has()
会是完美的解决方案吗?
- SEO 支持的内容和 PR 分发。 今天得到放大。
- 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
- Sumber: https://css-tricks.com/more-real-world-uses-for-has/
- 1
- 11
- 7
- 9
- 98
- a
- 对,能力--
- Able
- 关于
- 以上
- 账号管理
- 影响
- 所有类型
- 已经
- 时刻
- 惊人
- 和
- 另一个
- 使用
- 的途径
- 地区
- 论点
- 刊文
- 基于
- 因为
- 打赌
- 更好
- 之间
- 位
- 吹
- 建
- 束
- 可以得到
- 卡
- 级联
- 一定
- 更改
- 更改
- 孩子
- 程
- 类
- CMS
- 码
- 列
- 元件
- 包含
- 内容
- 可以
- 套餐
- 的CSS
- 决定
- 明确
- 根据
- 设计
- 不会
- 做
- DOM
- 别
- 向下
- 分子
- 特别
- 等
- 甚至
- EVER
- 所有的
- 例子
- 例子
- 体验
- 眼部彩妆
- 喜爱
- 专栏
- 少数
- 结束
- 火狐
- 以下
- 向前
- 止
- 充分
- 得到
- 给
- GOES
- 去
- 大
- 格
- 网格模板区域
- 指南
- 发生
- 有
- 帮助
- 相关信息
- hi
- 更高
- 突出
- HTML
- HTTPS
- 生病
- 思路
- 图片
- 改进
- in
- 互动
- IT
- JavaScript的
- 只有一个
- 保持
- 类
- 知道
- 语言
- 名:
- 布局
- 容易
- 小
- 看
- 寻找
- 占地
- 宏
- 制成
- 主要
- 使
- 管理的
- 许多
- 可能
- 时刻
- 更多
- 最先进的
- Mozilla的
- 需求
- 需要
- 全新
- 下页
- Next.js
- 通常
- 数
- 正式
- 一
- 开放
- 其他名称
- 学校以外
- 部分
- 特别
- 部分
- 模式
- 员工
- 地方
- 柏拉图
- 柏拉图数据智能
- 柏拉图数据
- 可能
- 当下
- 漂亮
- 市场问题
- 生产
- 出版
- 达到
- 应对
- 阅读
- 真实的世界
- 最近
- 删除
- 响应
- 行
- 定位、竞价/采购和分析/优化数字媒体采购,但算法只不过是解决问题的操作和规则。
- 运行
- 说
- 同
- 浏览
- 选择
- 集
- Share
- 网站
- 智能
- So
- 方案,
- 一些
- 东西
- 某处
- 特别
- 具体的
- 特异性
- 开始
- 州/领地
- 条纹
- 条纹
- 样式
- 超级
- 支持
- 表
- 采取
- TD
- 模板
- 国家
- 世界
- 事
- 事
- 思想
- 三
- 始终
- 至
- 吨
- 也有
- 完全
- 跟踪时
- true
- 上边
- us
- 使用
- 用户
- ux
- 等待
- 方法
- 什么是
- 是否
- 这
- WHO
- 赢
- 想知道
- 工作
- 世界
- 价值
- 将
- 写
- 完全
- 您一站式解决方案
- 和风网