面接で聞かれる可能性のあるCSSに関する質問

この記事は、100 回書かれ、質問された CSS の質問を記念するためのものです。

聞く：

CSS セレクターとは何ですか?どのプロパティが継承されますか?優先度？インラインと重要のどちらが優先度が高いでしょうか?

セレクタ

1	ワイルドカードセレクター (*)	ページ内のすべての要素のスタイルを表します	*{フォントサイズ:12px;マージン:0;パディング:0;}
2	タイプセレクター（body、div、p、spanなど）	ウェブページ内の既存のタグタイプは名前セレクタとして使用されます	div{幅:10px;高さ:10px;}
3	グループセレクター (,)	複数のオブジェクトに同じスタイルを同時に割り当てる	a:link、a:visited{color:#fff;}
4	レベルセレクター（スペース）	オブジェクト内のサブオブジェクトにスタイルを割り当てるセレクターが含まれています	#ヘッダー上部{幅:100px;}
5	IDセレクター（#）	ID セレクターは一意であり、ページ内で再利用することはできません。	#ヘッダー{幅:300px;}
6	クラスセレクター (.)	ページ内で再利用できる	.title{幅:300px;}
7	IEhack セレクター (_、*、\0、\9\0;)	さまざまなブラウザに対応	.title{_幅:50px;*高さ:30px;}

継承可能なプロパティ

コードをコピー

コードは次のとおりです。

方位角、境界線の折りたたみ、境界線の間隔、
キャプション側、色、カーソル、方向、高度、
空のセル、フォントファミリ、フォントサイズ、フォントスタイル、
フォントバリアント、フォントウェイト、フォント、文字間隔、
行の高さ、リストスタイルの画像、リストスタイルの位置、
リストスタイルタイプ、リストスタイル、孤立、ピッチ範囲、
ピッチ、引用符、豊かさ、ヘッダーの読み上げ、数字の読み上げ、
話す-句読点、話す、発話速度、
ストレス、テキストの配置、テキストのインデント、テキストの変換、
可視性、音声ファミリー、音量、空白、
未亡人、単語間隔

優先順位の4つの原則

原則1 ：不特定の才能を受け継ぐ

デモ1:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
*{フォントサイズ:20px}
.class3{ フォントサイズ: 12px; }
</style> </p> <p><span class="class3">フォントサイズはどれくらいですか? </span>

デモ2:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
#id1 #id2{フォントサイズ:20px}
.class3{フォントサイズ:12px}
</スタイル> </p> <p><div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">フォントサイズはどれくらいですか? </span> </p>
</div>

原則 2: #ID > .class > タグ

デモ1:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
#id3 { フォントサイズ: 25px; }
.class3{ フォントサイズ: 18px; }
スパン{フォントサイズ:12px}
</style> </p> <p><span id="id3" class="class3">フォントサイズはどれくらいですか? </span>

原則3:より具体的であるほど良い

デモ1:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
.class1 .class2 .class3{フォントサイズ: 25px;}
.class2 .class3{フォントサイズ:18px}
.class3 { フォントサイズ: 12px; }
</スタイル> </p> <p><div class="class1">
<p class="class2"> <span class="class3">フォントサイズはどれくらいですか? </span> </p>
</div>

原則4:タグ#ID > タグ.クラス

デモ1:

コードをコピー

コードは次のとおりです。

<スタイルタイプ="text/css">
span#id3{フォントサイズ:18px}
#id3{フォントサイズ:12px}
span.class3{フォントサイズ:18px}
.class3{フォントサイズ:12px}
</style></p> <p><span id="id3">フォントサイズはどれくらいですか? </span>
<span class="class3">フォントサイズはどれくらいですか? </span>

最後に：原則が矛盾する場合、原則1 > 原則2 > 原則3 > 原則4