如何设置文本颜色取决于CSS3中的元素类名称

Question

我试图根据li span类名称设置文本颜色。如果span类名称为绿色，则父li文本颜色也应为绿色;如果span类名称为灰色，则父li文本颜色也应为灰色。这样做吗？

演示：https://stackblitz.com/edit/angular-gr8adt?file=src%2Fapp%2Fapp.component.css

这个问题不是重复的。请清楚理解。

CSS：

   .green{
   color:green;
   }

   .gray{
   color:gray;
   }

   span.arrow < li {
   color:green;
   }

   span.gray < li {
   color:green;
   }

HTML：

          <ul> 
           <li><span class="green"></span>Car</li>
           <li><span class="green"></span>Bike</li>
           <li><span class="gray"></span>Plan</li>
           <li><span class="gray"></span>Cycle</li> 
           </ul>

Answer 1

是正确的，但是您必须将文本放在span标签内

这样

<ul> 
       <li><span class="green">Car</span></li>
       <li><span class="green">Bike</span></li>
       <li><span class="gray">Plan</span></li>
       <li><span class="gray">Cycle</span></li> 
 </ul>