提升CSS技巧::is(), :where(), 和:has()伪元素的运用

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的,我们出的钱
体验地址:https://chat.waixingyun.cn/#/home
可以加入网站底部技术群,一起找bug.

:is():where():has() 伪元素是 CSS 中用于样式化元素的非常强大的工具。它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素,例如元素的类型、元素的位置和元素的后代。

:is()

:is() 伪类可以用于基于选择器的组合来定位元素。它将一系列选择器作为其参数,并在元素匹配任何选择器时返回 true

例如,如果你想要针对所有类名为 isPinkisPretty 的元素进行定位,可以使用:is()伪类。

HTML/CSS

div:is(.isPink, .isPretty) {
  color: pink;
}

Pink

Pretty

Not Pretty

在浏览器中渲染时会看起来像这样:

image.png

2. :where()

:where() 伪类可以根据条件来定位元素。它以条件作为参数,并在元素匹配条件时返回 true

例如,如果你想要定位所有类名以 bold 开头的元素,可以使用 :where()伪类来实现:

将以下伪类添加到上述CSS文件中,将导致任何具有以 bold 开头的CSS类的子元素渲染为粗体。

div:where([class^="bold"]) {
  font-weight: bold;
}

HTML

Pink

Pretty

在浏览器中渲染时会看起来像这样:

image.png

伪元素 :is() 和 :where() 看起来在做同样的事情。但是,伪元素 :is() 用于根据选择器列表匹配元素,而伪元素 :where() 则用于根据条件匹配元素。

3. :has()

:has() 伪类可以用于基于后代元素来定位元素。它以选择器作为参数,并在元素具有与选择器匹配的后代时返回 true

例如,如果你想要定位所有包含元素的元素,可以使用 :has() 伪类来实现。在这一步中,我们的 HTML 没有任何变化。这个 CSS 的添加使得元素具有紫色的背景。

div:has(p) {
  background-color: purple !important;
}

这是我们网页现在的样子:

image.png

这些新的伪元素是任何CSS技能集中不可或缺的工具。经过一些练习,你将能够自信地在自己的项目中使用它们。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

你可能感兴趣的:(提升CSS技巧::is(), :where(), 和:has()伪元素的运用)