Html CSS基于具有特定子元素的邻居选择元素_Html_Css_Css Selectors

Html CSS基于具有特定子元素的邻居选择元素

html css

Html CSS基于具有特定子元素的邻居选择元素,html,css,css-selectors,Html,Css,Css Selectors,这是一个网页的简化结构第一组第2组选择我别打扰我我想根据它的邻居div选择所有p，里面有a。以下是我最好的尝试： document.querySelectorAll（'（div>a[href=“/foo”]）~p'）但显然这不是一个有效的CSS选择器如果它有一个内部有a的邻居div，可以选择p吗？我可能没有正确理解你的问题，但是如果你只想选择选择我，为什么你不能把它分配给一个类呢比如说, HTML: 到目前为止（据我所知），您无法从CSS中的子对象中选择父对象，更不用说选择相

这是一个网页的简化结构


第一组
第2组
选择我
别打扰我

我想根据它的邻居

div

选择所有

，里面有

。以下是我最好的尝试：

document.querySelectorAll（'（div>a[href=“/foo”]）~p'）

但显然这不是一个有效的CSS选择器

如果它有一个内部有

的邻居

div

，可以选择

吗？

我可能没有正确理解你的问题，但是如果你只想选择

选择我

，为什么你不能把它分配给一个类呢

比如说,

HTML:

到目前为止（据我所知），您无法从CSS中的子对象中选择父对象，更不用说选择相邻的“父对象”。不过，我给你的最好答案是这个，希望能有所帮助

div+p{
背景颜色：黄色；
}


第一组
第2组
选择我
别打扰我

如果它有一个具有内部的相邻div，是否可以选择p

您需要使用

：has（）

选择器，但是完整的解决方案取决于您是否希望在以下情况下使用它：

live profile适用于任何上下文，包括实时的浏览器CSS选择器匹配。它包括本文档中定义的每个选择器，除了

：has（）

：

快照配置文件适用于对性能不太敏感的环境；特别是，它适用于根据静态文档树评估选择器的上下文。例如，DOM中定义的

querySelector（）

方法应该使用快照配置文件

当谈到

：has（）

时，特别是：

在
```
.css
```
/
样式表规则选择器（这是一个实时上下文）：否
在
```
.css
```
/
样式表规则选择器中，通过客户端脚本允许使用
```
：has（）
```
（这意味着它实际上被用于快照上下文）：是
- 这里有一个库可以执行此操作：
在
```
querySelector
```
中，
```
queryselectoral
```
，
```
匹配
```
和其他DOM函数（即快照上下文）：Yes
- 但截至2020年5月，本机没有浏览器支持在这些函数中使用
```
：has（）
```
- 经过一些粗略的谷歌搜索，我找不到一个polyfill或补丁来添加对
```
：has（）
```
  的
```
查询选择器的支持，boo
```


但是，假设您可以使用：has（）
（例如，因为您在2030年阅读了这篇文章），那么您只需要以下查询：
div:has(> a[href="/foo"]) ~ p

为什么：has（）不在Live配置文件中？
CSS不支持基于其子元素选择元素的原因有很多（尽管有少数例外，如：empty
和：focus in
），但主要原因是：

这将使CSS选择器在计算上更加昂贵
CSS设计用于处理部分加载的文档，例如，当加载文档时，它不会显著改变外观

作为一个思想实验：假设浏览器在CSS样式规则中支持<代码>：HASE（）/CODE >，考虑一个看起来像这样的HTML文档：
<html>
<head>
    <style>
    p { background-color: red; }
    p:has(div) { background-color: blue; }
    </style>
</head>
<body>
    <p>foo <div></div></p>
    <p>bar</p>
    <p>baz <div></div></p>
</body>
</html>


p{背景色：红色；}
p:has（div）{背景色：蓝色；}
福
酒吧
巴兹

“foo”和“baz”元素为蓝色，“bar”元素为红色
现在，如果浏览器的此文档处于部分加载状态，以致到目前为止（在用户的Wi-Fi连接断开之前）或在下一个TCP数据包到达之前，它只加载了此文档：
<html>
<head>
    <style>
    p { background-color: red; }
    p:has(div) { background-color: blue; }
    </style>
</head>
<body>
    <p>foo


p{背景色：红色；}
p:has（div）{背景色：蓝色；}
福

浏览器需要为被截断的元素插入自己的结束标记，从而干净地终止部分加载的文档，如下所示：
<html>
<head>
    <style>
    p { background-color: red; }
    p:has(div) { background-color: blue; }
    </style>
</head>
<body>
    <p>foo</p>
</body>
</html>


p{背景色：红色；}
p:has（div）{背景色：蓝色；}
福

因此，当文档处于这种状态时，第一个p
将是红色，而不是蓝色-然后在用户的Wi-Fi连接重新连接（或下一个TCP数据包到达）并且页面完成下载后，然后foo
获得，因此:has（div）
规则现在适用，foo
将突然从红色变为蓝色，这是不好的
现在在这个精心设计的示例中，一个细微的差异，比如背景颜色的改变，并不重要，但是如果使用：has（）
选择器来控制页面布局中的一些主要差异（例如body:has（footer）>main{display:grid；
）然后，当页面仍在加载时，这将真正打乱页面布局——这就是为什么基于子代内容的选择器在其当前形式中暂时不受支持的原因
（但是考虑到后代选择器的父级的实用性和实用性，我想它们将来会被重新引入，以某种方式限制规则的使用，只有在DOMContentLoaded
触发后，或者当选择器不确定时，需要默认或回退。
您可以使用使用“X包含Y”的选择器-输入逻辑，但只能在querySelector
和querySelectorAll调用中输入，而不能在样式表中输入。@Dai是的，当然你可以用JS做很多事情，但我相信这不可能只用CSS，我认为这是OP所要求的。非常酷，但仍然需要JS来执行。谢谢你的分享。我没有这样做知道这一点。谢谢你的回答
<html>
<head>
    <style>
    p { background-color: red; }
    p:has(div) { background-color: blue; }
    </style>
</head>
<body>
    <p>foo

<html>
<head>
    <style>
    p { background-color: red; }
    p:has(div) { background-color: blue; }
    </style>
</head>
<body>
    <p>foo</p>
</body>
</html>