css 如果一个div没有id或class，但是它后面的div [复制]，如何改变它的样式

wrrgggsh 于 2023-05-19 发布在其他

关注(0)|答案(4)|浏览(149)

此问题已在此处有答案：

Is there a "previous sibling" selector?（32个回答）
3天前关闭。
我有一个情况，第三方软件提供了一个html模板，我没有访问，但他们允许css的变化。
给定类似于下面的东西，比如我有第二个父div的id，但没有第一个父div的id，有没有办法把第一个父div的背景颜色改为红色？

<div>
  <div>First div</div>
</div>
<div id='second'>
  <div>Second div</div>
</div>

我尝试了下面的方法，但没有成功：

<style>
  /* Styles for the div immediately before the second div */
  #second ~ div {
    background-color: red;
  }
</style>

<div>
  <div>First div</div>
</div>
<div id="second">
  <div>Second div</div>
</div>

仅仅用CSS就能实现这一点吗？
注意：我只能改变基于CSS的东西，因为我没有访问HTML，所以我不能添加ID或使用JavaScript

css

来源：https://stackoverflow.com/questions/76256343/how-to-change-the-style-of-a-div-if-it-has-not-id-or-class-but-the-div-after-it

4条答案

按热度按时间

sqserrrh1#

你可以使用第4级选择器:has来实现，但是目前它的支持有限，目前firefox还不支持。
使用:has，你可以这样做：

div:has(~#second) {
   background-color: red;
}

如果没有:has，则需要使用一些javascript逻辑。
检查:has support on caniuse

<style>
  div:has(~#second) {
    background-color: red;
  }

</style>

<div>
  <div>First div</div>
</div>
<div id="second">
  <div>Second div</div>
</div>

赞(0）回复(0）举报 2023-05-19

nbnkbykc2#

您可以使用此选择器来执行此操作：

div:has(+ #second) {
  background-color: red;
}

你可以把这个选择器想象成：
1.正在选择所有div
1.将div s过滤为仅匹配模式div + #second的元素，这在技术上将仅返回1个元素，因为id应该是唯一的

赞(0）回复(0）举报 2023-05-19

cuxqih213#

这将是更容易找到的元素使用即谷歌开发'元素'标签。如果你不能做到这一点，你可能需要使用JS。

// Find the element of known id using getElementById
const targetDiv = document.getElementById("second");

// Get the previous child of the elements parent
const previousDiv = targetDiv.previousElementSibling;

赞(0）回复(0）举报 2023-05-19

5w9g7ksd4#

如果你给予第一个div一个父元素，你可以用#element > child处理这个元素的CSS和它的'div'子元素。

<style>
  #firstParent > div {
    background-color: red;
  }
</style>

<div id="firstParent">
  <div>First div</div>
</div>
<div id="second">
  <div>Second div</div>
</div>

赞(0）回复(0）举报 2023-05-19

我来回答

css 如果一个div没有id或class，但是它后面的div [复制]，如何改变它的样式

4条答案

相关问题

热门标签

最新问答