CSS 选择器::is(), :where(), 和:has()伪元素的运用
发表于:2023-06-18 10:08:24浏览:787次
css的伪元素:is()
、:where
() 和:has()
是用于样式化元素的非常强大的工具,它们是在 CSS 选择器 Level 4 规范中引入的。它们允许我们将样式应用于符合特定条件的任何元素,例如元素的类型、元素的位置和元素的后代,它们用于选择元素中的特定内容或子元素。
:is()伪元素用于根据元素的选择器选择子元素。例如,如果你想要针对所有类名为 isPink 或 isPretty 的元素进行定位,可以使用:is()伪类。
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>
:where()伪元素用于根据元素的父元素选择子元素。例如,如果你想要定位所有类名以 bold 开头的元素,可以使用 :where()伪类来实现,将以下伪类添加到上述CSS文件中,将导致任何具有以 bold 开头的CSS类的子元素渲染为粗体。
div:where([class^="bold"]) {
font-weight: bold;
}
<div class="isPink">
<p>
Pink
</p>
</div>
<div class="bold_text isPretty">
<p>
Pretty
</p>
</div>
:has()伪元素用于根据元素是否包含另一个元素来选择元素,它以选择器作为参数,并在元素具有与选择器匹配的后代时返回 true。
例如,如果你想要定位所有包含元素的元素,可以使用 :has() 伪类来实现。在这一步中,我们的 HTML 没有任何变化。这个 CSS 的添加使得元素具有紫色的背景。
div:has(p) {
background-color: purple !important;
}
这些伪元素非常灵活,并且可以根据您的特定需求组合使用。例如,您可以使用:where()和:has()来选择一个元素,该元素是另一个元素的子元素,同时具有特定的类名。
推荐文章
- ThinkPHP6+JS实现大文件分片上传,切片上传
- 2021年度个税汇算今起开始,3月1日至3月15日需要预约,3月16日至6月30日,无需预约
- SAAS系统中多租户数据库设计方案探讨
- thinkphp6 leftjoin联表查询时,子表有多条记录去重后获取子表的最新记录查询方法
- PHP将透明图片(PNG)合并到JPG背景图片上,实现PNG透明的效果
- JavaScript实现json数据深拷贝的几种方法
- bignumber.js,javascript前端高精度计算库推荐
- ThinkPHP6使用中间件实现后台登录验证方案
- JS检测移动设备环境:WeChat、Android、IOS
- PHP中的public,static,private,protected,final,const,abstract解析与区别