根据另一个元素的样式更改元素样式而不使用javascript

Question

在CSS中我们有@media规则根据窗口条件改变元素的样式。 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

但有没有办法根据另一个元素的样式更改元素样式而不使用JAVASCRIPT？

示例：

HTML：

<div class="parent">
  <div class="div1"></div>
</div>

CSS：

.parent {
  width: 100%
}

.div1 {
  color: #000000 when parent's width >= 400px;
  color: #FFFFFF when parent's width < 400px;
}

Answer 1

您可以创建相对于父元素的元素样式，如下所示：

SCSS：

.parent {
    width: 100%
    & > .div1 { color: #FFFFFF; }
    @media (min-width 400px) {
        & > .div1 { color: #000000; }
    }
}

CSS：

.parent > div1 { color: #FFFFFF; }
@media (min-width 400px) {
    .parent > div1 { color: #000000; }
}