僅在特定元素內引用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的情況下可見。）