CSS の一般的な問題を 1 か所にまとめ_html/css_WEB-ITnose

一般的な CSS の問題をすべて理解します

疑似クラスと疑似要素

疑似クラス

疑似クラスとは何ですか? クラスはクラスではありません、それ自体で宣言されたクラスでもありません (スタイルを記述せずに存在することもあります)。

疑似要素の理解は初期段階です。 Web ページ上のリンク (アンカー) は、クリックすると紫色になり、マウスを置くと色が変わります。 .1 は、ハイパーリンク (href 属性を持つ) にのみ適用される 2 つを定義します。

疑似クラス名の説明

:link

:visited 疑似-クラス名 説明

は、すべてのアンカーを示します。ハイパーリンク (href) を作成し、*未訪問* アドレスを指します (すべてのアンカーが未訪問であるわけではありませんが、一部のブラウザではこれができないことに注意してください)	訪問済みのすべてのアンカーを示します
動的疑似クラス

: focus

現在フォーカスがある要素(タブで切り替え可能)、入力を受け付ける、またはアクティブ化できる要素 その他 要素の最初の子要素を選択するための静的疑似クラス: first_chilid

:hover	マウスが留まっている要素(そうではない)ハイパーリンクに限定)
:active	入力またはアクティブ化された要素を示します (ハイパーリンクに限定されません)
動的疑似クラスは任意の要素に適用でき、非リンク スタイルのアプリケーションに役立ちます	最初の子要素を選択します

<div> 

 <p></p> 

 <ul> 

 <li href='abc'></li> 

 <li></li> 

 </ul> 

So

div:first_child 最初の子要素は 8d5359d7acd57fbd757004226d27415d

ul :first_child の最初の子要素は 9f01f4a91053917419bfe531e856d072bed06894275b65c1ab86501b08a632eb

疑似クラスと組み合わせる

CSS2.1 では、疑似クラスは次のことができます同じセレクターと組み合わせることができます。

</div> 

a:link:hover { }

a:visited:hover { } 

順序は重要ではありません、効果は同じです。

疑似要素

疑似要素セレクター

疑似クラスがアンカーのファントムクラスを指定するのと同じように、疑似-要素はドキュメント内に架空の要素を入力できます。このようにして、CSS2.1 で 4 つの疑似要素が作成され、最初の文字スタイル (:first-letter) を設定し、最初の行 (:first-line) を設定します。前の設定 (:before)、後の設定 (:after)

:after、:before と言えば、 content 属性は「当然必須」です

さらに、CSS3 では、擬似要素が: から: にアップグレードされます。 :、これは、擬似クラスと区別するために、単一のコロンと互換性があることを意味します。公式の推奨事項は、2 つのコロンを使用することです。 product は、この単純な属性値に一致します。

a:hover:visited { } 

を使用する場合、その属性一致は実際には完全な文字列一致ではないため、

を使用する必要があります。不都合でなければ、以下を使用できます

いくつかの属性値に基づいて選択します

上記の例では次のように使用できます:

h1[class] { color:red; } 

この製品がクラスセレクターを置き換えることができることがわかったと思います

単一クラスの選択

複数のカテゴリの選択には必要ですが、IE7 より前のバージョンでは、IE が複数のカテゴリのセレクターを正しく処理できないことをご存知ですか

a[href][title] { font-weight:bold; } 

a[href="http:a.com"] 

通常、このセレクターはクラスに warning と help が含まれる p 要素のみに一致すると考えられます

ただし、IE7 より前のバージョンでは、p.warning は使用できますが、p.waring.help はクラスが help であるすべての p 要素に一致します。なぜなら、セレクターに表示される最後のものには警告するものが何もないからです。

したがって、属性セレクターを使用すると、この問題を回避できます

セレクターの特殊性

セレクターの特異性は、コンポーネントによって決まります。セレクター自体。特異度の値は 0.0.0.0 の形式で 4 つの部分で表現されます。これは数値ではありませんが、数値として扱われます。

セレクターで指定された各 # ID 属性値、追加ポイント 0,1,0,0;

クラス属性値 (.class)、属性選択 (xxx [atr='']) または疑似クラスの場合、セレクター、追加ポイント 0,0,1, 0

セレクターで指定された各要素 (htm body div scan) と疑似要素に対して、ドキュメントによると、疑似要素のボーナス ポイントが 0,0,0,1 追加されます。 CSS2.1からスタート

Combiner(+,,>で特に馴染みは全くありません)とワイルドカード(*、特異性への寄与値は0,0,0,0)です

あまり言うのはもったいないので、例を挙げてみましょう

セレクタの特異性を取得します Value

h1 { }

0,0,0,1

2. p em {}
3. 0,0,0, 2

.grap { }

0,0,1,0 *.grap {} {{}

これらを見たことがありますが、これら 4 つのうちの最初に会ったことはありません。誰がとても優れていますか? HTML 行で書かれたインライン スタイル。

これらを含め、これらは、複数のセレクターが同じ要素を競合するときに使用されます。最強の能力。

つづく...

	#ID {} ,1,0,0
div#header *[attr] { }	0,1,1,1