html - 仅在特定元素内引用 CSS 类

Question

我已经定义了这个:

.grade a{
    color: white;
}

它有效。太好了..

我有一个这样的html

<li class="grade">
   <a><i class="fa fa-star fa-fw"></i></a>
      My Text 
</li>

bootsrap i star 元素被涂成白色。我不想这样。

我如何只指定具有 .grade 类的元素

<a class="grade"> Text here should be white </a>

而不是其他元素？

Answer 1

照原样，您正在选择任何 a 元素，它是具有类 grade 的元素的后代。

要指定本身具有 grade 类的 a 元素，请将选择器更改为:

a.grade

a.grade {
  color: red;
}

.grade a {
  color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="grade">
   <a><i class="fa fa-star fa-fw">Text within an &lt;a&gt; descendant of .grade</i></a><br>
      Text outside of &lt;a&gt; element
</li>

<a class="grade"> Text in an &lt;a&gt; element, which has the class grade itself. </a>