16

CSSの「階層」に問題があります（階層と呼ぶのが適切かどうかはわかりません）。以下のHTMLのスタイルを設定しようとしています。

<body>
  <section id="content">
    <article>
      <ul class="posts-list">
        <li class="post-item">
          <h2>[post title]</h2>
          <p class="item-description">...</p>
          <p class="item-meta">...</p>
        </li>
        ...
      </ul>
    </article>
  </section>
</body>

section＃contentはページごとに変わるので、すべてのページで一貫したスタイルを維持したかったので、いくつかの「グローバル」CSSルールを作成しました。

#content {
  color: #000;
  margin-left: 300px;
  max-width: 620px;
  padding: 0px 10px;
  position: relative;
}

#content p,
#content li {
  color: #111;
  font: 16px / 24px serif;
}

別の方法でHTMLのスタイルを設定したかったul.posts-listので、これらのルールを作成しました。

li.post-item > * {
  margin: 0px;
}

.item-description {
  color: #FFF;
}

.item-meta {
  color: #666;
}

しかし、私はいくつかの問題に遭遇しました。ChromeがCSSをレンダリングする方法は次のとおりです。

ChromeがCSSをレンダリングする方法のスクリーンショット

何らかの理由で、ルールがとのルール#content p, #content liを上書きしています。私の印象では、クラス/ ID名は特定のものと見なされるため、優先度が高くなります。しかし、CSSがどのように機能するかについて誤解しているようです。私はここで何が間違っているのですか？.item-description.item-meta

編集：また、この階層がどのように機能するかについて、どこでもっと読むことができますか？

4

5 に答える 5

30

要素IDは最も具体的であるため、CSSでは優先されます。IDを使用する必要があります：

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

基本的に、idは、tags（p、li、ul、h1 ...）を優先するクラスを優先します。ルールを上書きするには、優先順位があることを確認してください;）

于 2012-05-04T04:24:00.527 に答える
6

CSSルールが測定される「階層」は特異性と呼ばれます。CSSルールの各部分には、実際の数値の基数10の値があります。IDは100の価値がありますが、クラスはわずか10です。

詳細については、http：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/を参照してください。

于 2012-05-04T04:24:39.370 に答える
-2

CSS 標準に従うことをお勧めします。css セレクターを選択し、その親の下で makeit を選択すると、css ファイル (.css ファイルなど) をロードするときに競合が発生しない場合があります。

于 2016-03-21T18:58:16.937 に答える