CSS 動的擬似クラス セレクターのレビュー-3_html/css_WEB-ITnose

动态伪类选择器

伪类选择器：大家熟悉的：【:link】【:visited】【:hover】【:active】
CSS3的伪类选择器分为六种：
（1）动态伪类选择器
（2）目标伪类选择器
（3）语言伪类选择器
（4）UI伪类选择器
（5）结构伪类选择器
（6）否定伪类选择器
注：和其它CSS选择器的区别-伪类选择器都以冒号【:】开头

思考问题？
（1）CSS3伪类选择器有什么功能？
（2）选定元素能带来什么便利？

1.1.动态伪类选择器语法
动态伪类包含两种：
（1）在链接中常看到的锚点伪类
（2）为用户行为伪类

（3）锚点伪类设置遵循【爱恨原则LoVe/HAte】，即link->visited->hover->active
（4）IE6、IE7、IE8，a:link的针对性比其他3个都弱

1.2.动态伪类选择器兼容性

注：IE6浏览器仅支持链接锚点a:hover

2.1目标伪类选择器：用来匹配文档（页面）的URI中某个标识符的目标元素

标题1
标题2
标题3

内容1

内容2

内容3

2.2 ターゲット擬似クラス セレクターの構文

注: ターゲット擬似クラス セレクターは、一致する要素を指す URL がある場合にのみ有効になります

2.3 ターゲット擬似クラスセレクター ブラウザーの互換性

注: ターゲット疑似クラス セレクターは IE8 以前のバージョンではサポートされていませんが、IE ユーザーはディレクトリ内のリンクをクリックすると対応するタイトルにジャンプしますが、そのタイトルは下に強調表示されません。 IE のバージョンが高い場合は、より高いバージョンが必要です 明るい効果には JS を使用する必要があります

2.4 ターゲット疑似クラスセレクターによる関連知識の記憶方法:

三角コーナーのマーキング方法について: (均一に透明に設定)
1.左右のポイントは透明です
2. 方向が指す場所、透明な場所

transition: プロパティの期間、タイミング関数遅延;

プロパティ: 対応するアスリートの期間と同等です。 : 目標に相当、完了するまでにかかる時間
timing-function: 対応するトラックを選択する
delay: どのくらい待つ必要がありますか?
3.1 言語擬似クラスセレクター
言語擬似クラスセレクターを使用して要素を照合する言語の使用は非常に便利で、特に多言語の Web サイトの場合、その効果はさらに明白です。これを使用して、さまざまな言語バージョンに応じてページのフォント スタイルを設定できます

3.2 言語擬似クラス セレクター構文
言語擬似クラス セレクターは、言語エンコーディングに基づいて要素と一致します。この言語情報はドキュメントに含まれるか、ドキュメントに関連付けられている必要があり、CSS から指定することはできません。

ドキュメントの言語を指定するには 2 つの方法があります:

1.
2.
Language pseudo -クラスの選択 ブラウザーでは、さまざまな言語で特別なルールを定義できます。これは、多言語 Web サイトで特に便利です。
E(要素):lang(言語) は、E に一致するすべての要素を選択することを意味し、一致する要素は lang 属性を指定します。その値は language です

3.3 ブラウザの互換性

注: IE6 および IE7 の場合は、互換性のないブラウザです、異なる名前のスタイルシートを参照できます

3.4 実用的

WWF の目標は次のとおりです。

人々が自然と調和して暮らす未来を築きましょう

その成功を願っています。

4.1UI要素ステータス擬似クラスセレクター
は主にフォーム要素で使用され、人間とコンピューターのインタラクション、操作ロジック、ページ全体の美しさを改善し、フォームページをよりパーソナライズされた上品なものにし、ユーザーがページを操作できるようにします。はより便利でシンプルです

4.2 UI 要素のステータス疑似クラス セレクター構文
UI 要素のステータスには、有効、無効、選択、選択解除、フォーカス、フォーカスを失った、ロックおよびスタンバイなどが含まれます。

HTML要素フォームのテキスト入力ボックス、有効と無効に分かれています;

HTML要素フォームのラジオボタンと複数選択ボタン、チェック済みとチェックなしに分かれています

4.3ブラウザとの互換性

IE9はUI要素を完全にサポートします。ステータス擬似クラスセレクター

IE6 ~ IE8 に関しては、互換性の問題を解決するために JS ライブラリを使用する必要があります

5.1 構造擬似クラスセレクター
構造擬似クラスセレクターは、ドキュメントツリー内の要素の特定の特性に基づいています(相対位置など) を使用してそれらを見つけます。つまり、ドキュメント ツリー構造間の関係を通じて特定の要素を照合することで、HTML ドキュメント内の ID またはクラス名の定義が減り、対応する要素が DOM ドキュメント ツリーを通じてコードを整理された状態に保つことができます。取得

5.2 構造擬似クラス セレクター構文

構造擬似クラス セレクターを区別できるようにするアーティファクト!

5.3 構造体擬似クラスセレクターのブラウザ互換性

5.4 構造体擬似クラスセレクターのパラメーター n

:nth-child(n)

:nth-last-child(n)

:nth-of-type (n)
:nth-last-of-type(n)
(1) パラメータ n は特定の値です: 0 より大きい任意の正の整数です
(2) パラメータ n は式 [n*length ]: n は 0 から計算され、長さ > 0 の整数は n の倍数です
(3) パラメーター n は式です [n+length]: 長さ >= の要素を選択します
(4) パラメーター n は式です[ -n+length]: (5) パラメーター n は式 [n*length+b]: b はオフセット値で、n*length+b 番目の要素が次の間隔で選択されることを示します長さ要素
(6) パラメーター n はキーワード [odd]: 奇数を選択します
(7) パラメーター n はキーワード [even]: 偶数を選択します

":first-of-type" セレクター":first-child" セレクターと似ていますが、違いは、

が要素

の型を指定することです。これは主に、親要素の下にある特定の型の最初の子要素を見つけるために使用されます。

first-child は最初のものを選択する必要がありますが、first-of-type は最初のものを選択することはできません

6.1 ネガティブ擬似クラスセレクター

ネガティブセレクター [:not()] は、CSS3 セレクターの新しい選択肢です。 jQuery の [:not()] は、セレクターに一致しない要素を見つけるために使用されます

6.2 否定的な疑似クラスセレクター構文
はコンテンツをフィルタリングする役割を果たします

6.3 ブラウザ互換性

7 つの疑似要素

CSS2.1 で使用: [:first-line] [:first -letter] 【:before】【:after】
CSS3は、前の擬似要素【::first-line】【::first-letter】【::before】【: :after】をベースにコロンを追加して擬似要素を調整しました。 [::selection] も追加されました
ブラウザは両方のメソッドをサポートしています

(1) 擬似要素::first-letter: テキスト ブロックの最初の文字を選択するために使用されます。例: 次の Shen の頭文字
(2) 擬似要素::first-line: 要素のテキストの最初の行を選択するために使用されます
(3) 疑似要素::before および ::after: はマークアップ内に存在するコンテンツを参照しませんが、挿入する場所を指定できます。追加コンテンツ。生成されたコンテンツは DOM の一部にはなりませんが、スタイルを設定して疑似要素のコンテンツを生成することもできます。content 属性と連携する必要もあります
(4) 疑似要素::選択: 強調表示されたテキストと一致するために使用されます。つまり、マウスでテキストを選択した後のスタイルです。 [注]::selection は、背景と色という 2 つの属性のみを受け入れます

注: IE6 ~ IE8 では、単一コロンのみをサポートします