1

Twitter Bootstrap を使用して、テーブル内の 1 つの列のコンテンツを右に揃えようとしています。

問題は、その.text-rightクラスが要素に対して機能しないことです<td>。スタイルの適用text-align:rightは機能しますが、要素に適用されるクラスが一般的な要素スタイルよりも優先度が低い理由が気になります。

http://jsfiddle.net/ctANw/6/

4

3 に答える 3

2

I'm curious why class applied to element has lower priority then general element style.

インライン スタイルは CSS で最も特異性が高いため (!importantキーワードを使用する以外に)

特異性を 4 つの数字 (0、0、0、0) と考えてください。

  • インライン スタイルが最初 - 最も優先度が高い
  • ID セレクターは 2 番目の数字です
  • 疑似クラス、属性セレクター、およびクラスは 3 番目です。
  • 型セレクターは 4 番目です (これには疑似要素も含まれます)。
  • ユニバーサル セレクター*の特異性は 0 で、何でもオーバーライドされます。

それを使用して、特定のセレクターをオーバーライドする方法を理解できるはずです

于 2013-03-31T13:47:02.000 に答える
1

「text-align: left;」を持つ 192 行目の .table td ルールだけです。上書きしています。

于 2013-03-31T13:46:52.530 に答える
0

これは、特異性階層の問題です。

すべてのセレクターは、特異性階層にその場所があります。特定のセレクターの特異性レベルを定義する 4 つの異なるカテゴリがあります。

  1. インライン スタイル (ドキュメント内のスタイルの存在)。インライン スタイルは、XHTML ドキュメント内に存在します。スタイルを設定する要素に直接アタッチされます。例えば<h1 style="color: #fff;">

  2. ID (ID セレクターの数) ID は、 などのページ要素の識別子です#div。

  3. クラス、属性、および疑似クラス (クラス セレクターの数)。:hoverこのグループには、.classes、[attributes] 、および:focusなどの疑似クラスが含まれます 。

  4. 要素と疑似要素 (要素 (タイプ) セレクターの数)。たとえば:before、 とを含みます:after。

于 2013-03-31T13:54:05.190 に答える