3

55px をインデントする .content CSS クラスがあります。場合によっては、段落の先頭にリンクを入れたいのですが、このリンクをインデントしたくありません。

インデントを含まない新しい .content2 クラスを作成する以外に、リンクに直接適用されるクラスを使用してインデントを無効にする方法はありますか?

リンクをフォーマットするために呼び出されるクラスを介してリンクに適用される負のインデント値を使用しようとしましたが、実際にはリンクボックスをインデントしないでください.

問題のページ: http://www.fccorp.us/development/index.jfx.php

グラフィックスナップルムートンをありがとう！

これは、新しいが関連する質問を提起します: 矛盾する複数のクラスのカスケード順序は何ですか? 私はFirefox（現在のバージョン19.0.2、非ベータ版）でテストしており、リンクは通常2つのクラスを使用しますが、特定のクラスは3番目を使用します.

- アップデート -

クラスを削除した私の編集 (ただし、私の css ファイルには 9 行余分に必要でした) が必要なくなりました。しかし、これは私のマージンの問題を解決しませんでした:

最初のクラスは、マージンを含むリンクの「ボックス」(ボックス モデル) の外観を構成し、リンク テキストの外観 (リンク、訪問済み、アクティブ) を構成します。これらのリンクが段落内に配置されている場合にのみ使用される (以前は 3 番目だった) 2 番目のクラスは、リンクが段落内にあるために適用されなくなった値を無効にするために使用されます。(ほぼ) すべてのボタンに適用される最初のクラスを介して上下の余白を設定します。(現在の) 2 番目のクラスでは、段落内に配置されているいくつかのリンクの余白を無効にしようとしました。しかし、何らかの理由で、2 番目のクラスを介して 0px (ゼロ) のマージン値を使用して否定された値は変更されていません。それらは、最初のクラスによって割り当てられた値のままです。

(これを入力したときに、リンク/訪問済み/アクティブ属性を調整するキーを削除する方法に気付いたので、現在変更中です。しかし、それで何かが変わるとは思えません。変更された場合は、これを更新します。) - Asアップデートで言ったのですが、この変更はマージンが解消されないという問題を解決しませんでした。

ただし、既存のマージンをキャンセルしようとするのではなく、実際に負の数を使用してそれらを無効にする必要がありますか? これは機能するはずですが、CSS カスケードは、特定のスタイルが矛盾する場合に他のスタイルを上書きすることを意味すると考えました。それとも一緒に追加されますか？

4

3 に答える 3

3

それを行うには複数の方法があります。マージンまたはパディングをオーバーライドして (編集 3 のリンクを参照)、インデントを 0 に設定するか、私が好む方法で、コンテンツに幅 100% の div 要素を使用して左にフローティングします。

<div style="float:left; width:100%;">
     <a style="float:left">stuff</a>
</div>

編集：アンカーの横に1行あるテキストも修正する必要があります。実際にテキストをバナーの右側に配置したい場合は、div を削除して、アンカーを左側に浮かせます。

Div は非常に柔軟で、空の空白スペースを好きなように設定または削除できるため、Div を使用することを本当に好みます。

編集2：違いを示すためにペイント画像も作成しました。:)

ここに画像の説明を入力

編集 3: 新しい質問に答えるには、カスケード順序に関するほとんどすべてを説明するリンクをここに示します。

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

基本的には重量の高い方が勝ち。両方が同じ重量の場合、後者が常に勝ちます。(最後に来た方が有効になります。)

順番に：要素に直接追加されたスタイル>スタイルシート>デフォルト

スタイルシート内では、 #id > .class > element

同じものが複数ある場合は、最後の 1 つが勝ちます。

編集 4: 申し訳ありませんが、回答の 2 番目の文が間違っていました。私はそれを編集しました。

これをアンカーに追加するだけです

margin-left:0px;
margin-bottom: 0px;
margin-top: 0px;

マージンを削除します。

于 2013-03-26T14:19:01.040 に答える
3

CSS カスケード

カスケードは主に特異性によって決定されます。以下は、優先度の高いものから低いもののリストです。

1. !important modifier
2. Dynamically-applied styles using JavaScript
3. Inline styles specified using the style attribute
4. Specificity of the selector (higher specificity wins)
      (a)  #id                                 (100 points each)
      (b)  .class, :pseudo-class, [attribute]  ( 10 points each)
      (c)  element, ::pseudo-element           (  1 point each )
      (d)  *                                   (  0 points each)
5. Whichever one appears last

最も優先度の高いスタイルが最後に適用されます。同点の場合は、コードの後半にある方が勝ちです。

これは少し単純化しすぎていますが、基本的な考え方を伝える必要があります。より詳細に：

  • クラス、疑似クラス、または属性は、任意の数の要素または疑似要素よりも優れています。
  • id は、任意の数のクラス、疑似クラス、または属性に勝ります。
  • 静的 HTML または JavaScript を介して設定されたインライン スタイルは、任意の数の ID に勝ります。
  • そして何よりも、修飾子のあるスタイルは、!important修飾子のないスタイルよりも優れています.

特異性の例

                 formal         informal
selector         notation       notation
---------        --------       --------
* {}             0,0,0,0        0000
div {}           0,0,0,1        0001
.a {}            0,0,1,0        0010
#a {}            0,1,0,0        0100
div#a.b.c {}     0,1,2,1        0121

また、インライン スタイルの特異性は 1000 ポイント (1,0,0,0) です。

于 2013-03-26T15:39:18.307 に答える
1 
text-indent: 0px;

CSS プロパティ。

その値を無効にして、リンクの padding-left または margin-left に使用すると、必要な結果が得られます。

<p style="text-indent:40px;">
    <a hre="#" style="margin-left:-40px;" onclick="this.style.display='none';">Un-indent</a> blah blah blah blah blah</p>
于 2013-03-26T13:57:05.367 に答える