CSS中的：HAS（）选择器的简介

>本文探讨了CSS:has()选择器，这是一种根据其内容选择元素的强大工具。 虽然相对较新，但它的支持在主要浏览器中增长（Safari 15.4，Chromium 105，在Firefox的国旗后面）。

如果满足其括号内的特定条件，则

pseudo-class样式 target

元素 - 附加的元素。 这类似于其他伪级，例如:has()>或。 但是，与那些不同，接受相对选择的列表，启用复杂的选择标准。:hover :active例如，:has()样式

元素包含一个

article:has(img)> <article></article>仅针对孩子，请使用儿童组合：

To target only direct children, use the child combinator: article:has(> img)文章：has（＆gt; img）。 :has()的特异性由其括号内最特定的选择器确定（例如，:has(#id, p, .class)继承ID选择器的特异性）。

>兄弟姐妹选择器也可以与

一起使用。 :has()样式h1:has( h2)元素直接直接<h1></h1>元素。 一般兄弟姐妹组合者（<h2></h2>）允许更广泛的兄弟姐妹选择。例如，如果它在此之后的任何地方都有~ul:has(~ p) 同级的<ul></ul>样式a<p></p>>。

>选择器可以链接以创建和条件。例如，仅当它具有:has()article:has(> img:first-child):has(h1 h2)<article></article><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907548383844.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="An Introduction to the :has() Selector in CSS ">>

>可用的codepen演示可以提供这些示例。 本文摘自

释放CSS的功能：响应式用户界面的高级技术，可在SitePoint Premium上获得。

>经常询问有关CSS的问题（常见问题解答）：具有选择器（本节在很大程度上保持不变，因为它准确地反映了选择器的历史和当前浏览器支持。）

什么是CSS：选择器有什么作用？

>

CSS

选择器是一种强大的工具，允许您根据其子女选择一个元素。 这是一个关系伪级，这意味着选择取决于元素之间的关系。 :has()我可以使用CSS：所有浏览器中都有选择器吗？

>浏览器对

>的支持正在改善，但尚未通用。请查看网站，例如我可以使用最新信息。

> :has()>我如何使用：selector with jquery？

>

>当地浏览器支持正在增长，您可以将

与jQuery一起使用以进行更广泛的兼容性。 语法与CSS版本非常相似。

> :has()：selector和其他CSS选择器有什么区别？

在其关系性质上是独一无二的；它根据儿童元素的存在选择，与仅关注属性或位置的选择器不同。

有其他选择：selector吗？:has()

替代方案包括现有CSS选择器的JavaScript或更复杂的组合，但这些组合通常缺乏

>的优雅和简洁性。

为什么：

:has() browsers中不支持选择器？

>

最初，有关渲染速度阻碍广泛采用的绩效问题。 但是，随着这些问题的解决，浏览器的支持正在改善。> >我可以使用：CSS文件中的选择器吗？

>

是的，但仅在支持它的浏览器中。

>

：selector的语法是什么？

基本语法是

。

>

>我可以使用：其他选择器的选择器吗？

> :has(selector)是，

可以与其他选择器结合使用，以进行更复杂的选择。

：选择器的未来是什么？

未来看起来光明； 随着浏览器支持的改善，:has()> >>

以上是CSS中的：HAS（）选择器的简介的详细内容。更多信息请关注PHP中文网其他相关文章！