微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。