关于javascript:提升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。

例如，如果你想要针对所有类名为 isPink 或 isPretty 的元素进行定位，能够应用 :is() 伪类。

HTML/CSS

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

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div class="isPretty">
  <p>
    Pretty
  </p>
</div>

<div>
  <span>
    Not Pretty
  </span>
</div>

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

2. :where()

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

例如，如果你想要定位所有类名以 bold 结尾的元素，能够应用 :where()伪类来实现：

将以下伪类增加到上述 CSS 文件中，将导致任何具备以 bold 结尾的 CSS 类的子元素渲染为粗体。

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

HTML

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div  class="bold_text isPretty">
  <p>
    Pretty
  </p>
</div>

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

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

3. :has()

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

例如，如果你想要定位所有蕴含元素的元素，能够应用 :has() 伪类来实现。在这一步中，咱们的 HTML 没有任何变动。这个 CSS 的增加使得元素具备紫色的背景。

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

这是咱们网页当初的样子：

这些新的伪元素是任何 CSS 技能集中不可或缺的工具。通过一些练习，你将可能自信地在本人的我的项目中应用它们。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

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

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