面接で聞かれる可能性のある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 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

推薦する

Reactはラジオコンポーネントのサンプルコードを実装します

この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...

JavaScriptはブラウザがIEかどうかを判定します

フロントエンド開発者としては、IEの落とし穴は避けて通れません。他のブラウザはいいのにIEは壊れてい...

JavaScript 初心者のための二分探索木アルゴリズムのチュートリアル

目次バイナリ検索木 (BST) とは何ですか?バイナリツリーの基本的な走査(インオーダー、ポストオー...

React Native の基本原則の深い理解 (Bridge of React Native)

この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...

両端揃えレイアウトを実現する CSS 列のサンプルコード

1. 堂々巡りいろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS ...

MySQL インデックスがソートに与える影響の分析例

この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...

Vue3における7種類のコンポーネント通信の詳細

目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...

explainコマンドがMySQLデータを変更する理由

クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

MySQL 8.0.15 で MGR シングル マスターと複数スレーブを構成する方法

1. はじめにMySQL グループ レプリケーション (略して MGR) は文字通り MySQL グ...

Mac 向け MySQL 5.7.17 のインストールと設定のチュートリアル

1. MySQLをダウンロードする公式サイトのダウンロードページをクリックすると次のページに入ります...

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...

Webフロントエンド開発CSS関連チームコラボレーション

フロントエンド開発部門は成長し、スタッフも増加し、技術も向上しています。 CSSer はフロントエン...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...