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

面接で聞かれる可能性のある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> <!-- 実行結果: .class3{ font-size: 12px; }-->

デモ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> <!--実行結果: .class3{ font-size: 12px; }-->

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

デモ1:


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

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

原則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> <!--実行結果: .class1 .class2 .class3{font-size: 25px;}-->

原則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> <!--実行結果: span#id3{font-size:18px} | span.class3{font-size:18px}-->

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

!重要

IE6 は !important を認識しますか? ? ?

回答: はい、ただし小さなバグがあります。

例えば:


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

<スタイル>
#ida {サイズ:18px}
.classb { フォントサイズ: 12px; }
</style></p> <p><div id="ida" class="classb">!重要なテスト: 18px</div>

参加する!重要


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

<スタイル>
#ida{フォントサイズ:18px}
.classb{ フォントサイズ: 12px !重要; }
</style></p> <p><div id="ida" class="classb">!重要なテスト: 12px</div>

IE6 バグ:


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

<スタイル>
.classb{ フォントサイズ: 18px !重要; フォントサイズ: 12px }
</style></p> <p><div class="classA">!重要なテスト: 12px</div>

理由と解決策:

ここで、テキストは IE6 では 12 ピクセルですが、他のブラウザでは 18 ピクセルです。

しかし、スタイルを変更して最後に !important を追加すると、つまり .classb{ font-size: 12px;font-size: 18px !important; } とすると、IE6 でも他のブラウザと同様に 18px フォントが表示されます。

<<:  Nginx ソースコードのコンパイルとインストールのプロセス記録

>>:  CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

推薦する

CSSを使用して中央に固定された2つの列と適応型列を実現する方法

1. 絶対位置とマージンを使用するこの方法の原則は、左側と右側をドキュメントの流れから外れるように配...

Vue.js のミックスインの詳細な説明

ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...

jQuery で従業員管理登録ページを実装する

この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...

フローティングメニュー、上下スクロール効果を実現できます

コードはさらに合理化できますが、時間の制約があるため、まずはここで投稿して、自分で最適化してメニュー...

Html+CSS フローティング広告ストリップの実装

1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...

Vue シングルページ SEO の 4 つのソリューションについての簡単な説明

目次1.Nuxtサーバーサイドレンダリングアプリケーションの展開(SSRサーバーレンダリング)利点:...

CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例

原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...

Docker+nextcloudで個人用クラウドストレージシステムを構築

1. Dockerのインストールと起動 yum で epel-release をインストールします ...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...

CSSを使用してダークモードとブライトモードを切り替える

Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...

VirtualBox仮想マシンがNATモードで外部ネットワークに接続できない問題の解決策

背景VirtualBox 仮想マシン (Ubuntu 16.04 システムがロードされている) には...

Windows と Linux 間のリモート デスクトップ接続

Linux へのリモート デスクトップ接続といえば、まず VNC の使用を思い浮かべるかもしれません...

Mybatis マッパー動的プロキシの原理の分析

序文動的プロキシの原理を説明する前に、まず、mybatis を統合した後の dao 層の 2 つの実...

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...