2

#commentslink の色を白に変更しようとしています。他のすべてのフォント スタイル (font-family、size) は機能していますが、色だけは変わりません。

私のHTMLはこれです;

<div id="commentslink">
  <div class="circle">
    <p><a href="">10</a></p>
  </div>
</div>

私のCSSはこれです

a:link, a:visited {
  color: #0eb0d3;
  text-decoration: none;
}

a:hover {
  color: #0eb0d3;
  opacity: 0.4;
  text-decoration: none;
}


#commentslink {
  float: right;
  font-color: #ffffff;
  font-size: 19px;
  font-family: 'Montserrat', sans-serif;
}

.circle {
  float: right;
  background-color: #f89b2d;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  margin-top: -10px;
  margin-right: 20px;
}
4

5 に答える 5

7

まず第一に、それは唯一のものであり、第二にあなたが使うべきものではcolorありませんfont-color: #ffffff;

#commentslink a { /* Specific selector */
    color: #fff;
}

デモ

上記のセレクターはa要素内のすべてのタグを選択#commentslinkするため、ネストされた内部idをターゲットにしたい場合は、次のようなより具体的なセレクターを使用できますap

#commentslink .circle p a { 
   /* Selects all a element nested inside p tag further nested inside an element 
      having class .circle which is further nested inside an element having 
      #commentslink as an id
   */
   color: #fff;
}

本当に必要でない場合は、セレクターを過度に具体的にしないでください。そうしないと、ネストされたルールがどんどん作成されて CSS が肥大化することになるため、できる限り基本的なものにしてください。

最後になりましたが、これは CSS3 とは何の関係もありません。

ここでよく読んでください..この回答に関連しています...

于 2013-08-14T20:30:25.693 に答える
2

これを試してください!important

 #commentslink {
    float: right;
    color: #ffffff !important;
    font-size: 19px;
    font-family: 'Montserrat', sans-serif;
    }

color:ではなく使用しますfont-color

于 2013-08-14T20:32:18.073 に答える
2

エイリアン氏の答えを詳しく説明すると、セレクターを使用するのが最善#commentslink aです。CSS ルールは特定性の順に適用され、a要素のスタイルは親要素 ( ) のスタイル設定よりも特定的です#commentslink。セレクター#commentslink aは他のいずれよりも具体的であるため、優先されます。

ここに特異性に関する良い記事があります。

そして、他の人が述べたように、プロパティはそうではありcolorませんfont-color。

@Sobinは、!important内の要素に適用される他のルールを無効にするため、慎重に使用する必要があります#comments div。特異性を利用することをお勧めします。

于 2013-08-14T20:39:19.050 に答える
0

タグに CSS スタイルが適用されるため、「10」は #0eb0d3 になります。

変化する

#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;

#commentslink へ { float: right; font-color: #ffffff !重要; フォントサイズ: 19px; font-family: 'Montserrat', sans-serif;

そして、それは他のスタイリングをオーバーライドします

于 2013-08-14T20:33:04.627 に答える
0

Replace font-color with color.

   #commentslink {
    float: right;
    color: #ffffff;   // this is enough not font-color
    font-size: 19px;
    font-family: 'Montserrat', sans-serif;
    }

Also 

a:link, a:visited {
    color: #0eb0d3;  // Also this a css override
    text-decoration: none;
}

Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers. 

#commentslink a {
  color: #ffffff;
}

Thanks @Mr. Alien for his fiddle and the SO link.

于 2013-08-14T20:31:19.273 に答える