根据另一个元素的样式更改元素样式而不使用 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; }
}