のみだけ

Question

私はこれを定義した特定の要素内のCSSクラスを参照：

.grade a{ 
    color: white; 
} 

それは動作します。あまりにもよく..

私はbootsrap Iのスター要素が白く塗られているので、

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

ようなHTMLを持っています。そして、私はそれを望んでいません。

は、どのように私はクラスの.grade

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

とされていない他の要素を持つ要素を指定することができますか？

Answer 1

同様に、gradeの要素の子孫であるa要素を選択しています。

にあなたのセレクターを変更、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

ターゲットa要素に使用typeTag.classNameは：

li.grade { 
 
    color: red; 
 
} 
 

 
li.grade a i { 
 
    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はなりたかった何色と述べたことがありません。だから私はそれが体と同じ色でなければならないと仮定します。これを書いてください。あなたが白.grade内部a要素が、クラスgrade自分自身を持っているだけでa Sだけでなく、必要な場合

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

第二に、あなたもセレクタとして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>

（IはFontAwesomeの非存在下で、それが見えるように、アイコンにテキストのビットを追加したことに留意されたい。）