根據另一個元素的樣式更改元素樣式，不使用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; } 
}