精通CSS-点击快速学习

在CSS Selectors 4规范中，CSS 引入了一个名为的新选择器:has()，它最终让我们可以选择父级。这意味着我们可以选择具有特定元素的父元素。目前Safari和Chrome105已经支持。

父选择器如何在 CSS 中工作

在 CSS 中，如果我们想要选择某些东西，我们会使用后代选择器。例如，选择在div标签中的p标签中，如下所示：

div p {color: red;
}

在这之前，如果我们想要选择包含p标签的div标签是没有办法的，我们就需要使用javaScript来完成我们的操作。

使用:has选择器，我们现在可以选择包含p子元素的div元素，或者选择器的任何正常组合。代码如下所示：

div:has(p) {color: red;
}

这段可以会将所有含有p标签的div标签的颜色变成红色。

将父选择与其他选择器相结合

就像任何其他 CSS 选择器一样，我们可以在特定情况下组合它。例如，如果只想选择div具有直接span子代的标签：

div:has(> span) {

CSS 父选择器 :has()相关推荐

在CSS中实现父选择器效果
为何CSS不支持父选择器? 这个问题的答案和"为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?"是一样的. 浏览器解析HTML文档,是从前往后,由外及里的.所以, ...
CSS继承选择器与包含选择器的比较
作者:sagahu@163.com 日期:2011-12-21 CSS继承选择器与包含选择器的作用很像,其类似点主要有: 继承选择器的子孙元素可以继承到祖先元素的某些样式:而包含选择器的子元素可以得到 ...
CSS父级子级学习总结
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1.认识了解简单讲CSS父级 CSS子级是相对而言,如一个DIV "A"被另外一 ...
scss里父选择器的标识符
一般情况下,sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content asi ...
CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局...
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style>#user {width: 200px;}& ...
css复合选择器 1205
css复合选择器 1205 后代选择器通过父级筛查后代父级后代{属性:值} 子选择器通过父级筛查子级父级子级{属性:值} 交集选择器利用标签与类相交的特性来选中目标标签.类名{属性:值 ...
css——常用选择器
一,常用的基本选择器 1.最基本的了 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
HTML中的父选择器,html – css4中是否有父选择器？
可能没有CSS4这样的东西,但有"选择器等级4"这样的东西.这是下一代选择器的未完成规范,并且在规范中包含父选择器.或者更准确地说,是一个"主题"选择器. 但请 ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...

CSS 父选择器 :has()

精通CSS-点击快速学习

父选择器如何在 CSS 中工作

将父选择与其他选择器相结合

CSS 父选择器 :has()相关推荐

最新文章

热门文章