仅在特定元素内引用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元素被漆成白色。 而且我不想要它。

我怎样才能只指定.class类的元素

<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> 

Answer 2

使用如下样式

a.grade {
  color : red;
}

演示： https : //jsfiddle.net/e73t9mtk/

Answer 3

使用typeTag.className为目标a元素：

 li.grade { color: red; } li.grade ai { color: green; } a.grade { color: blue; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <li class="grade"> <a><i class="fa fa-star fa-fw"></i></a> My Text </li> <a class="grade"> Text here should be white </a> 

Answer 4

首先，您从未说过要让i成为什么颜色，只是说您不希望它是白色。 因此，我假设它应该与主体具有相同的颜色。 写这个。

body, .grade i {
  color:#777;
}

其次，如果不仅要在.grade白色中包含a元素，而且还想要仅具有自身grade的a ，则还必须添加a.grade作为选择器。

.grade a, a.grade {
  color: white;
}

因此，完成所需操作的完整代码如下。

 html { background:#ddd; } body, .grade i { color:#777; } .grade a, a.grade{ color: white; } 

 <ul> <li class="grade"> <a><i class="fa fa-star fa-fw">(icon goes here)</i></a> My Text </li> </ul> <a class="grade"> Text here should be white </a> 

（请注意，我在图标上添加了一些文本，以使其在没有FontAwesome的情况下可见。）