1

これに対する答えは簡単かもしれませんが、自分で理解することはできません。

次の HTML があります。

<div id="excerpt">
    <p class="chapter">Chapter One</p>
    <p>Text</p>
    <div class="copyright-notice">
        <p>Copyright &copy; 2014 Name. All rights reserved.</p>
    </div>
    <!--end copyright-notice-->
</div>
<!--end excerpt-->

それに付随する次のCSS：

#excerpt {
    padding:20px;
    color:#000000;
}
#excerpt p {
    line-height:1.4em;
    text-indent:45px;
    text-align:justify;
}
p.chapter {
    text-align:center;
    text-indent:0;
    font-size:16pt;
    text-transform:uppercase;
}
.copyright-notice {
    border-bottom: 1px solid #999999;
    border-top: 1px solid #999999;
    margin:20px auto;
    padding:20px;
}
.copyright-notice p {
    display: block;
    color:#666666;
    text-align: center;
    text-indent:0;
}

JSフィドルの再現。

ご覧のとおり、テキストを中央に配置し、チャプター クラスと著作権表示内のテキストを含む段落のインデントを 0 に設定しようとしています。しかし、うまくいきません。次のように、スタイルを HTML ファイル内の段落に直接適用するとします。

<p style="text-align:center;text-indent:0;">text</p>

JSフィドルの再現。

うまくいきます。しかし、CSS の text-align と text-indent を使用してこれらの段落のスタイルを設定しようとするとすぐに無視されます。

私が間違っていることは何か分かりますか？ご協力いただきありがとうございます！

4

1 に答える 1

3

これは単なる特異性の問題です。

セレクター#excerpt pは より具体的ですp.chapter。したがってtext-indent:0、適用されません。属性の使用時に適用された理由styleは、インライン CSS がより具体的であるためです。

より具体的には、(しゃれた意図で)#excerpt pは 101 の特異性計算をp.chapter持ちます。一方、11 の特異性を持ちます (ID は 100 ポイント、クラスは 10、要素は 1)。

解決策としては、次のいずれかを使用して、仕様の競合を回避します。

p {
    text-indent:45px;
}
p.chapter {
    text-indent:0;
}

また..

#excerpt p {
    text-indent:45px;
}
#excerpt p.chapter {
    text-indent:0;
}

(他のスタイリングは簡潔にするために省略されています。)

すべての段落要素をインデントするのではなく、#excerpt. ただし、CSS で 's をできるだけ使用idしないようにします。JS 用に保存してください。

于 2014-08-30T16:32:10.873 に答える