当存在单独的元素时，可以在元素上放置 css 规则吗？

Question

我有一个 scss 文件，我想检查页面上是否存在某个元素，如果存在，我想隐藏另一个元素。

大致：

.thisElementExist + elementExists{
  .anotherElement: {
    display: none !important;
  }
}

我知道我可以在 javascript 中做到这一点，但我想知道是否只能在 scss 文件中做到这一点？

Answer 1

SASS 和 CSS 都不可能做到这一点。 SASS 严格来说是一种声明性语言；没有 javascript.

就无法访问其他元素的状态

不过用js很简单:

const elementOne = document.getElementById('elementOne')
const elementTwo = document.getElementById('elementTwo')

if (elementOne.style.display == 'none') {
    elementTwo.classList.add('your-style');
}else {
    elementTwo.classList.remove('your-style');
}

使用 React，您可以通过将其放入 effect hook:

来自动获得它运行

useEffect(() => {
    const elementOne = document.getElementById('elementOne')
    const elementTwo = document.getElementById('elementTwo')

    if (elementOne.style.display == 'none') {
        elementTwo.classList.add('your-style');
    }else {
        elementTwo.classList.remove('your-style');
    }
});

当存在单独的元素时，可以在元素上放置 css 规则吗？

Possible to put css rule on an element when a seperate element exists?

css

sass

reactjs