0

非常に基本的な HTML/CSS/JS ウィジェットを作成しようとしていますが、CSS レイヤーに問題があります。動作するセレクターを書くことができないようで、非常に悪化しています。特に、ウィジェットのボディ css セレクターから継承された font-size 設定をオーバーライドしようとしています。私の HTML (実際には Hamlet です) は次のとおりです。

<div class="container">
  <div id="flashcard-container">
    <div class="span6 offset3 well flashcard">
      <div class="front">
        <p class="flashcard">This is the front of the card.

私のCSSファイルには次のように書かれています：

.flashcard p {
  font-size: 24px;
}

div .back {
  display: none;
}

実際、私は両方のセレクターに問題があります。特に、最初のものは xml 構造に一致するように機能しません。2番目のものは最適ではないようです。そもそもdivについて話していることを指定する必要があるのはなぜですか? タグが何であれ、背中を定量化したいだけです。

これは非常に基本的なことだと認識していますが、これと 3D トランジションを伴う Chrome のバグとの間で、非常に混乱したと思います。フロントエンドを扱ってから何年も経ちました。:(

4

2 に答える 2

1

これを試して：

    p.flashcard { ... }
    div.back { ... }

実際、あなたのコードにバック クラスを持つ div が表示されません。.flashcard と .back だけを使用することもできます。div または p を指定すると、選択肢が狭まります。.flashcard を指定すると、たとえば、または の両方に適用されます。

しかし、あなたが書くなら

    .flashcard p { ... }

次のように、.flashcard のすべての子孫を選択したことを意味します。

    <div class="flashcard">
          <p>...</p>
    </div>
于 2013-09-18T20:19:05.317 に答える
1

クラスがアタッチされたノードをターゲットにする場合、構文は次のとおりです。

elementname.classname {...}

(ただし、OOCSS 狂信者は、.classname を使用して、CSS を構造的に不可知にすることを提案します)。

「バックを定量化する」とはどういう意味かわかりませんが、単に「バック」クラスで要素をターゲットにしたい場合は、次のようにターゲットにできます。

.back {...}

「back」はかなり一般的なクラス名であるため、スタイルを含めるのが最善かもしれませんが：

.flashcard .back {...}
于 2013-09-18T20:19:10.147 に答える