主页 / 问题 / 1425125
Accepted
Vadim
Asked:2022-08-29 21:26:02 +0800 CST2022-08-29 21:26:02 +0800 CST

如果父元素有另一个元素，如何向元素添加样式？

  • 772

是否可以检查下一个元素？假设它发生了header，那么intro。如果 after headeris intro，则添加header属性。

我试图这样做，但它不起作用：

.header + .intro .header {
    position: absolute;
}

还是只是JS完成了？

css

1 个回答

  1. Best Answer

    据我所知，没有JS是没有办法实现的，所以这里有一个使用JS的实现：

    let hdr = document.querySelector('.header')

if(hdr.nextElementSibling.className.includes('intro')) {
  hdr.classList.add('someClass')
}
    .someClass {
  color: red;
}

.someClass::after {
  content: ' - Этот элемент имеет класс someClass.';
  color: black;
}
    <div class="header">Пример текста 1</div>
<div class="intro">Пример текста 2</div>

    更多关于我用于 JS 的内容：

    更多关于我用于 CSS 的内容：

    更新

    最近Chrome新版本已经发布了支持伪类:has，火狐也支持:has，但是需要在页面上启用about:config（将layout.css.has-selector.enabled改为true），如果有的话，解决办法也适用于 Edge（从 105 版开始）、Opera（从 91 版开始）甚至是 Android 上的 WebView（从 105 版开始），这里有一个纯 CSS 的解决方案：

    body:has(.header + .intro) .header {
  color: red;
}
    <div class="header">Пример текста 1</div>
<div class="intro">Пример текста 2</div>

    • 1

相关问题