css - html5、ケースごとにFigureのスタイルを変える方法は?

Question

単ページのときは図の下にフィグキャプションを表示し、一覧ページのときは図と並べて表示したいです。というわけで、図タグに「list」または「single」クラスを追加しました。次に、css ファイルで、この 2 つのコードを使用してスタイルを変えます。

figure .list{....}
figure .single{...}

上記の css は、図の表示には何の影響もありません。figcaption のみが.class figcaptionコードに反応します。どうすれば修正できますか？

Answer 1

私が正しく理解していれば、figcaptionsのスタイルを設定したいと思います。そのためには、それらをターゲットにする必要があります。また、要素にクラスを追加するときは、次のように、クラスを要素に接続して記述する必要があります。

figure.list > figcaption { }
figure.single > figcaption { }

これfigcaptionは、がフィギュアの直接の子である場合にのみ機能します（したがって>）。そうでない場合は、これを使用できます。

figure.list figcaption { }
figure.single figcaption { }

---

CSSのクラスで要素をターゲットにする場合は、要素に接続されているクラスをドットで記述します。そのようです：

figure.list { }

このCSSは、a）別のファイル（JSまたはPHPファイルなど）によって追加されたスタイルまたはインラインスタイルb）最初のスタイルの後に書き込まれたスタイルc）同じ要素をターゲットとするスタイルによって上書きされる可能性があります。より徹底的/具体的に定義されているd） !important。

body figure.list {float: left;}
figure.list {float: none;}

例。2行目の値が前の行を上書きすると予想される場合でも、最初の行は最後の行よりも具体的であるため、これは発生しません。

スタイルが正しく表示されない理由がわからない場合は、ブラウザの開発ツール（F12）を使用してみてください。Chromeのツールは非常に優れていますが、Firefoxのツールはあまり好きではありません。ただし、Firebugプラグインは使用できます。

Answer 2

ドットの前のスペースを削除してみてください:

figure.list{....}
figure.single{...}