CSS 选择器::is(), :where(), 和:has()伪元素的运用
发表于:2023-06-18 10:08:24浏览:743次
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()来选择一个元素,该元素是另一个元素的子元素,同时具有特定的类名。
推荐文章
- 开源免费的CMS内容管理系统,勾股CMS2.0发布
- GitHub 开源了多款字体,支持自定义字重、宽度和倾斜度
- ThinkPHP6的伪静态规则整理(apache、nginx 、IIS)
- 前端报错:was loaded over HTTPS, but requested an insecure错误解决方案
- Thinkphp6中where条件中一个表两个字段比较条件的写法
- 用ECharts的getDataURL方法自动下载Chart图到服务器
- 勾股博客介绍及安装教程
- 微软推出VS Code PowerShell的重大更新 PowerShell 引擎的彻底改造
- layui.table 支持表格跨页多选的方法
- 勾股系列系统:项目任务协作管理系统 —— 勾股 DEV 3.8.31 发布