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的元素的后代。

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

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元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

首先，你从未说过i想要的颜色，只是你不希望它是白色的。所以我认为它应该与身体颜色相同。写下来。

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

其次，如果您不仅需要a白色内的.grade元素，而且只需要自己拥有类a的{{1}}元素，则必须添加grade也是一个选择器。

a.grade

所以完成你想做的事情的代码如下。

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

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

（请注意，我在图标中添加了一些文字，以便在没有FontAwesome的情况下显示。）

仅在特定元素内引用CSS类

4 个答案: