0

私は現在、私のウェブサイトを 2 つの列を持つように再設計しています。左の列はいくつかのリンクとテキストを含むサイドバーで、右の列はページの本文 ( ではありません<body>) です。私が抱えている問題は、ページ上の 2 つの完全に別個の要素の CSS ルールが両方の要素に影響を与えていることです。

それはおそらく意味をなさないので、ここに私のコードがあります：

CSS

#left h1, h2, h3, h4, h5, h6 {
    padding: 10px;
    color: black;
}
#right h1, h2, h3, h4, h5, h6 {
    padding: 0px 10px;
}

HTML

<div id="left">
    <?php include('sidebar.php'); ?>
</div>

<div id="right">
    <h2>Blah blah blah welcome</h2>
    <p>Yadda yadda yadda.</p>

    <div class="sep"></div>

    <h2>Etc etc</h2>
    <p>The end.</p>
</div>

私がやろうとしているのは、#rightヘッダーの上部と下部のパディングを削除することですが、何らかの理由で、私が何をしても、CSS ID が互いに影響しています。物理的に見えるだけでなく、Google Chrome でコードを調べると、両方の要素に両方のルールがあり、それら#leftに#right起因しています。基本的に、#rightヘッダーにはまだ上下のパディングがあります。

#leftCSS ルールが影響するかどうかを確認するために、またはページから完全に削除しようとしまし#rightたが、何もしませんでした。

これについて何ができますか？これは何かのバグですか？なんらかの理由で表示されないコードに何か問題がありますか?

私は理にかなっていると思います。お早めにどうぞ！

4

2 に答える 2

3

次のように書きます。

#left h1, #left h2, #left h3, #left h4, #left h5, #left h6 {
    padding: 10px;
    color: black;
}
#right h1, #right h2, #right h3, #right h4, #right h5, #right h6 {
    padding: 0px 10px;
}
于 2012-06-20T12:44:23.140 に答える
2

"無関係"？行の前に#left?を付けたからです。いいえ。目的の結果を得るには、
すべてのサブセレクターに接頭辞を付ける必要があります。#left

#left h1, h2, h3, ... {}
/* is equivalent to */
#left h1 {}
h2 {}
h3 {}

次のようにする必要があります。

#left h1, #left h2, #left h3, ... {}

私は同意します、それを複製することは面白くありません。生産性を向上させるために、 LESSやSASSなどの CSS プリプロセッサを使用してから、次のセレクタを使用できます。

/* Note: THIS IS NOT PURE CSS, USE A CSS PRE-PROCESSOR */
#left {
    h1, h2, h3, h4 { ... }
}
于 2012-06-20T12:44:08.840 に答える