CSS_html/css_WEB-ITnose を使用したクラス名交差複合セレクター

まず、基本的な定義を見てみましょう:

複合セレクターとは、2 つ以上の基本セレクターをさまざまな方法で接続することによって形成されるセレクターであり、主に「交差」セレクター、「結合」セレクター、「子孫」セレクターが含まれます。 。

交差点セレクター

「交差点」複合セレクターは、直接接続された 2 つのセレクターで構成され、その結果、それぞれの要素範囲の交差点が選択されます。最初のものはタグ セレクターである必要があり、2 つ目はカテゴリ セレクターまたは ID セレクターである必要があります。これら 2 つのセレクターの間にスペースを入れることはできず、連続して書き込む必要があります。

最初のものは p.class1 などのタグ セレクターである必要がありますが、場合によっては .class1.class2 が表示されることに注意してください。つまり、両方ともクラス セレクターです。この状況は他のブラウザーでは許可されていますが、IE6 には互換性がありません。 。次の表に示すように:

2 つのクラス セレクターの「交差」 複合セレクター ブラウザーのサポート表:

複合セレクターの使用

これは単純なタブ メニューです:

以下は HTML コードです:

< ;ul class="nav">

プログラム

< ;a href="">コレクション

ドラフト

project

上記の効果を実現するには、CSS で複合セレクターを使用できます。

タグを選択します

次のように、セレクターを使用してすべての 要素を定義できます:

.nav li a {}

最初の 要素を選択します

リストの左上隅に丸みを帯びた効果を追加するには、最初の 要素を選択する必要があります。これは、次のセレクターを使用して実現できます。最後の 要素を選択します

リストの右上隅に丸い効果を追加するには、次のセレクターを使用して実現できます。 .nav li.last a {}

現在のページを強調表示します

そのページが現在のページであることを示すためにタブの色を変更することで、現在のクラス名をクラス名に追加してこれを実現できます。次のように:

.nav li.current a {}

is the current ページの上部と左隅に丸い角を追加します

最初と最後のオプションが選択されている場合、問題が発生します。角が直角になっています。選択時に現在のページのスタイルを実現し、角も丸くするには、それら専用の特別なセレクターを作成する必要があります。クラス名が同じ要素内にあるため、最終的に交差複合セレクター To を使用できるようになります。次のように達成します:

.nav .first.current a {}

.nav .last.current a {}

Result

これは簡単そうですよね？上で述べたように、現在の問題は、IE5 も IE6 もクラス名交差複合セレクターをサポートしていないことです。 IE5 および IE6 は、クラス名を認識するときに最後のクラス名のみを認識します。効果は次のとおりです。

.nav .first.current a {}
.nav .last.current a {}

IE5 および IE6 は、これら 2 つのセレクターを次のように解析します。 .topnav .currents a {}

.topnav .current a {}

これは、これらのブラウザが現在のすべてのページに丸い角を追加することを意味します:

IE7 では問題はありません。つまり、IE7 はクラス名交差複合セレクターもサポートしています。 。

解決策

最初と最後のliに別の現在のスタイルを追加することもできますが、これではjsの負担が増加します。

;
• show
;
• コレクション
;
• ドラフト< ;

• プロジェクト
;

; .first_current a { }.nav .last_current は {}

ディスカッション

first や last のような冗長なクラス名をページに追加する手間を省く方法があります。それは、css3 スタイルを使用することです。 CSS3 により、要素の選択がより簡単になり、次の効果を使用して先頭効果と末尾効果を実現できます:

li:first-of-type a {}
li:last-of-type a {} 3 1

出典: http://www.codesocang.com/news/Webqianduan/2014/0511/7604.html