CSS セレクターで遊ぶ (2) ブラウザーのサポート、一般的なバグ、パフォーマンスの最適化_html/css_WEB-ITnose

はじめに

前回の連載ではCSSセレクターの基本的な使い方をまとめましたが、内容が多く詳細なため、現在はモバイルブラウザに適したCSSセレクターのリファレンスマニュアルとしてまとめています。

、CSSを学ぶ人にとっては参考になると便利です。すぐに完成し、後で公開されます(笑顔)。 このセクションの内容は、前のセクションの内容に続いて引き続き改善されます。まず、CSS セレクター (主に IE) のブラウザーのサポートが追加されます。たとえば、最も一般的に使用される s1、s2 などです。 , sN グループ セレクターは IE7 でのみサポートされており、IE7 はサブ要素セレクターや属性セレクターなど、予想外の多くのセレクターもサポートしていることがわかります。

後で、セレクターを使用するときに発生するいくつかの問題と解決策も追加します。最後に、ブラウザーがセレクターを読み取る方法と、セレクターを使用して高効率を達成する方法を理解します。

ブラウザのサポート

素晴らしい IE7

Web ページを開発するとき、Web ページが IE6 と互換性がある必要がある場合、当然、IE6 ブラウザと IE7 ブラウザは一緒にまとめられ、互換性のないセレクターと属性は使用されなくなります。もう使用することは考えていませんが、

IE6

と比較して、IE7には、グループ セレクター、隣接セレクター、兄弟セレクター、属性セレクターなど、利用できるセレクターがさらに多くあることはご存知でしたか。 次のセレクターは

IE6

をサポートせず、IE7 以降のブラウザーのみをサポートします 基本セレクター

セレクターs1,s 2、...、sNE > E + FE ~ F属性セレクターバージョン

説明	バージョン
グループ セレクター、すべての s1 要素または s2 要素に同時に一致します	2.1
隣接要素セレクター、E 要素の直後にあるすべての兄弟 F タグに一致します	2.1
E タグに続く兄弟 F タグと一致します	3
	セレクター	説明

E[attr]E[attr ="val"]E[attr~="val"]E[attr^="val"]E[attr*="val"]E[att|="val"] IE7SelectorE:hover

E 要素が att 属性に一致します	2.1
match att 属性を持ち、その属性値が val に等しい E 要素	2.1
att 属性と属性値に一致する単語リストには、val	2.1
に等しい E 要素があります。att 属性と一致し、属性値が E 要素ですval で始まる属性値が val で終わる文字列である E 要素	3
att 属性が文字列で属性値がval	3
E 要素を含む文字列で、att 属性と一致し、その属性値は val で始まりコネクタ "-" で区切られた文字列です	2.1
ブラウザでは、単一のチェックボックスのチェックは属性セレクターではサポートされていません。この部分については、以下の FAQ で詳しく説明されています。	擬似クラスセレクター
Description	Version

マウスオーバー時に要素のスタイルを設定します 2.1

E:第一子E:hover は IE6 の要素でのみ使用できますDescriptionテキストブロックの最初の文字を選択

一致親要素の最初の子要素 ​​E	2.1
擬似要素セレクター		Selector
Version		E:ファースト-letter

2.1

E:first-line平凡なIE8ブラウザの時代IE8 では、新しいセレクターはあまりサポートされていませんが、幸いなことに、最も一般的に使用される content 属性を持つ E:before および E:after は、IE8 で十分にサポートされています。 次のセレクターは をサポートせず、 以降のブラウザーのみをサポートします疑似クラスセレクターセレクター説明

要素の最初の行を選択	2.1
	IE6、IE7	IE8

バージョン

E:フォーカス

を設定します入力フォーカスになったときのオブジェクトのスタイル

擬似要素セレクター

SelectorDescriptionVersionE:beforeE:after

要素の前にコンテンツを挿入、Match 」	2.1

を使用します

要素の後にコンテンツを挿入するには、「content」を使用します

2.1

非常にクールで素晴らしい IE9

CSS3 の到来を歓迎するのが IE にとって最良の時代です。IE9 は新しい CSS3 の多くの疑似クラスと疑似要素をサポートしているため、私は仕方なくこの素晴らしい機能を IE に使用しました。修飾子。

次のセレクターはIE6、IE7、IE8をサポートしていません。IE9以上のブラウザのみをサポートしています

疑似クラスセレクター

セレクター	説明	バージョン
E:チェックしました	ユーザーインターフェース上の選択状態の要素 E と一致します	3
E:enabled	ユーザーインターフェース上の使用可能な状態の要素 E と一致します	3
E:disabled	ユーザーインターフェイス上で利用可能な状態の要素 E 無効な要素 E	3
E:root	は、ドキュメントのルート要素と一致します。HTML ドキュメントの場合、HTML 要素	3
E:last-child	親要素の最後と一致します A 子要素 E	3
E:nth-last-child(n)	n 番目の子要素 ​​E	3
E:nth-of-type(n)	同じ型の n 番目の兄弟要素 E と一致します	3
E:nth-last-of-type(n)	最後から 2 番目の n 番目の兄弟要素 E と一致します同じ型の	3
E:first-of-type	同じ型の最初の兄弟要素 E と一致します	3
E:last-of-type	最初の兄弟要素と一致します同じ型の要素 E 最後の兄弟要素 E	3
E:only-child	は唯一の子要素 ​​E	3
E:only-of-type	と一致しますtype 唯一の兄弟要素 E	3
E:empty	要素 E	3
E:not(s)	s セレクターを含まない要素と一致	3
E:target	ドキュメント内の特定の「ID」をクリックしたときの効果を一致させる	3

疑似要素セレクター

セレクター	説明	バージョン
E: :first-letter	テキストブロックの最初の文字を選択	3
E::first-line	要素の最初の行を選択	3
E::before	挿入要素の前にコンテンツを挿入するには、「content」と一緒に使用します	3
E::after	要素の後にコンテンツを挿入するには、「content」と一緒に使用します	3
E::selection	Setオブジェクトが選択されているときのスタイル	3

IE6 ～ 8 に疑似クラスと属性セレクターをサポートさせます

IE6 ～ 8 に CSS3 疑似クラスと属性セレクターをサポートさせる方法を考えたことがあるかもしれません。これを支援するために JavaScript ツールを使用します。次のように、selectivizr.js をページに導入するだけです:

ただし、使用する際にはいくつかの注意事項があります:

jQuery などの JavaScript ライブラリを参照する必要があります

は 2cdf5bf648cf2f33323966d7f58a7f3f タグによって導入されたスタイルのみを解析できます。スタイルが c9ccee2e6ea535a969eb3f532ad9fe89 によって定義されている場合、そのスタイルは解析されません

動的に生成された DOM は二次マッピングを行いません

。

必須 標準モードの DTD のみ有効です

プロジェクトアドレス: http://selectivizr.com

FAQ とバグ

* ワイルドカードは継承失敗の原因になります

<!- -[if (gte IE 6)&(lte IE 8)]>      <script type="text/javascript" src="selectivizr.js"></script><![endif]- ->

* {    color:red;}#test{    color:blue; }

▲ 最終的なテキストの色は赤です

フォローid の優先順位は * ワイルドカード文字よりも高く、テキストは id 要素の色の値を継承する必要があるため、最終的なテキストは青になるはずです。

したがって、ここで、継承されたスタイルの優先順位は、ワイルドカード セレクターを含む要素自体のスタイルよりも常に低くなります。したがって、隠れた問題を回避するために、開発中にワイルドカードの乱用をできるだけ避ける必要があります。

この問題については、「CSS の特異性に関する問題」も参照してください

IE6 以前のブラウザでは、ワイルドカード セレクター (*) はサポートされていませんが、無視されるため、偽装して表示されます。その効果に。

E:hover無効

E:hover擬似クラスは、マウスがホバーしているときに要素のスタイルを設定するために使用されますが、特定の状況では、次のように効果が無効になります:

<div id='test'>    <a href="#">text</a></div>

#test {    background:red;}#test div {     display:none;}#test:hover div{    display:block;    background:yellow;}

▲ When #test :hover がトリガーされると、この効果は

IE6 では無効になります。IE6 では、E:hover 疑似クラスは (ハイパーリンク) オブジェクトにのみ使用でき、オブジェクトには href 属性が必要だからです。

E:hover にも無効な状態があり、これが最も一般的です。コードは次のとおりです:

<div id="test">触发我<div>看到我了吧</div></div>

a:link {color:gray;}a:hover{color:green;}a:visited{color:yellow;}a:active{color:blue;}

▲ ハイパーリンクが a:hover にある場合、その効果とその色が無効であることがわかります。緑色、これは、ハイパーリンクの疑似クラス スタイルの記述順序が固定されており、これら 4 つの属性の正しい定義順序は次のとおりです。ボタン ボタンがクリックされる: フォーカスがトリガーされます 隣接する要素のテキストを太字にしますが、この効果は

IE8

では無効です。次のように、空の :focus セレクターを追加するだけです:

<a href="#nogo">文字</a>

E:first-line。無効

現在のセレクターで ! important が使用されている場合、:first-line 疑似クラス内で定義されている属性は完全に無視されます。 例:

a:link {}a:visited {}a:hover {}a:active {}

#test:focus + p {    font-weight:bold;}

▲ 通常、最初の行のテキストは赤色になりますが、 IE8 ブラウザでは変更せずに無視されます。この問題を解決するには、次のように ! important を削除するだけです。

<button id="test">点击我触发focus</button><p>文字</p>

E:first-letter Failure

E:first-letter failed と E:first-line failed は同じ問題です。上記の解決策を参照してください。 E 隣接する +F セレクターにも同じ問題があります。セレクターの途中にコメントを追加しないでください。

パフォーマンスの最適化

私たちは皆 CSS セレクターを使用していますが、それをより簡潔かつ効率的にするにはどうすればよいでしょうか?

まず第一に、セレクターのパフォーマンスへの影響は、

セレクターとドキュメント要素を照合するときにブラウザーが費やす時間

から生じます。そのため、セレクターを最適化する原則は、より多くの照合時間を消費するセレクターの使用を避けることですが、その前にまずブラウザのマッチングメカニズム、つまりブラウザがセレクターを読み取る方法を理解する必要があります。

セレクターのマッチング機構

#test:focus + p {    font-weight:bold;}#test:focus {}

このセレクターを見ると、まず nav という ID を持つ要素を見つけて、その子要素を見つけて a 要素に style 属性を適用すると思います。

実際はその逆です。ブラウザがセレクターを読み取るとき、私たちの読書習慣に従って左から右に読むのではなく、

セレクターの右から左に

従うからです。
このマッチングメカニズムを理解した後、このセレクターに戻り、ブラウザはまずページ内のすべての a 要素を調べてから、その親要素の ID が nav であるかどうかを確認する必要があります。セレクターの実際のマッチングコストは非常に高いと思われます。

右から左に一致する CSS セレクターのメカニズムを理解した後、次の 2 つのセレクターを見てみましょう:

p {    color:blue;}p:first-line {    color:red !important;}

<p>第一行文字，<br/>第二行文字</p>

2 番目のタイプのセレクターが最初のタイプよりも効率的だと思いますか? それは間違いです。 はい、実際、最初のセレクターの

key セレクター

は #id セレクターを使用し、2 番目のセレクターの

key セレクター は div タグ セレクター を使用するため、最初のセレクターの方が効率的です。

这里所说的关键选择器，就是CSS选择器中最右边部分，它是被浏览器最先寻找的，那么哪类选择器是最高效的？哪个是会影响选择器效率的关键选择器？

选择器效率

在上面内容中我们了解浏览器的匹配机制，以及关键选择器的重要性，那么哪些CSS选择器能够减少性能损耗呢？

Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：

id选择器（#id）

类选择器（.className）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）

从Steve Souders的CSS Test我们可以看出#id选择器和.className类选择器在速度上的差异很小很小。而在一个a标签选择器的测试上显示，它比#id选择器和类选择器的速度慢了很多，从这里我们可以看出#id、.className选择器 和 a标签、li a后代选择器中间的差异较大，但是相互之间的差异较小。

接下来举几个示例：

#nav {}.menu{}

p#nav {}p.menu {}

▲ 上面的选择器效率要高于下面的选择器，标签元素会降低选择器效率

优化建议

我们理解了CSS选择器从右到左匹配的机制，也了解关键选择器的重要性，以及CSS选择器的效率排序，那么在使用选择器的时候，通过避免不恰当的使用，来提升 CSS 选择器性能。

避免使用通用选择器

#nav * {…}

▲ 这个选择器所做的是选择所有在页面上的单个元素（是每个单个的元素），然后去看看它们是否有一个#nav的父元素。这是非常不高效选择器，开销太大了，应该避免关键选择器是通配选择器的情况。

避免使用标签或 class 选择器限制 id 选择器

/* Bad */div#nav {…}.menuBalck#menu {…}/* Good */#nav {…}#menu {…}

▲ ID选择器本身就是唯一的，加上div反而增加不必要的匹配；

避免使用标签限制 class 选择器

/* Bad */span.red {…}/* Good */.text-red {…}

▲ 在标签上定义class选择器，在开发和维护时容易混淆，一般不建议这样写。

避免使用多层标签选择器。使用 class 选择器替换，减少css查找

/* Bad */a[href="#"] > span > em {…}/* Good */.className {}

▲ 这种情况建议直接定义.className 选择器，然后使用f2d7d8b3ea660252df973e22f3458450d1c6776b927dc33c5d9114750b586338

避免过渡使用子选择器

/* Bad */div ul li a {}div > ul > li > a {}/* Good */.className {…}

▲ 这种情况建议直接定义.className 选择器，然后使用eec2aa4af8dc5b255a4a3dbbd3de39005db79b134e9f6b82c0b36e0489ee08ed

避免过度限制选择器

/* Bad */html body .wrapper #content a {}/* Good */#content a {}

▲ 这里至少有3个选择器是完全不需要的，过度限制选择器使浏览器工作比它实际需要的更繁重，花费的时间更多，所以这里应该避免。

利用可继承性

/* Bad */#nav > li > a { color:red; } /* Good */#nav { color:red; }

▲ 在使用选择器之前，请先考虑利用继承性实现

那一节继续整理选择器的优先级和继承性相关内容。