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