CSS3勉強記(1)：Selector_html/css_WEB-ITnose

カスタム属性:

selector

-webkit-
-moz-
-o-

Attribute selector

CSS3 より前では、特定/クラス要素を選択する必要がある場合、通常は id/class を使用して選択します。CSS3は、要素内の特定の属性に基づいて要素を選択できる、より強力な機能を提供します。詳細は以下のとおりです。

• E[attr]: 属性名 attr を持つすべての E 要素

• E[attr="value"]: 属性値が value である属性 attr を持つすべての E 要素

• E[ attr~="value"]: 属性値 (>=1) には値

が含まれています

• E[attr^="value"]: 属性値は値

で始まります

• E[attr$= "value"]: 属性値は値

で終わります

• E[attr*="value"] 属性値には値

が含まれます

• E[attr|="value"]: 属性値は value または a value- で始まる値

【備考】 IE7 以降でサポートされています。

初心者としては、最初の 2 つの方が理解しやすいと思います。特に注意すべき点がいくつかあります:

E[attr~="value"] および E[attr*="value"]: ~= は、属性に 1 つ以上の属性値が含まれることを意味します。 long as 属性に特定の値が含まれている場合、条件は満たされます。これは、属性値の一部が value と等しいことを意味します。

E[attr|="value"]: value - の代わりに value- から始めます。ハイフンの存在に注意してください。

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

CSS3 より前には、CSS1 の :hover、:visited、CSS2 の :after、:before などのいくつかの擬似クラス セレクターがすでに存在しており、CSS3 も引き続きそれらを継承します。 forward. :

• E:nth-child(n): E の親要素の n 番目の子ノードを表します。n の値は次のとおりです。
  • n: 1 から始まる整数。

    odd/2n -1: E の親要素内のすべての奇数番号の子ノードを表します

  • even/2n: E の親要素内のすべての偶数番号の子ノードを表します

  E:nth -last-child(n): E を表します E の親要素内の最後から n 番目の子ノードを表します

• E:nth-of-type(n): 親要素内の型 E の n 番目のバイトポイントを表しますof E

• E:nth-last-of-type(n): E の親要素内のタイプ E の最後から 2 番目の n 番目の子ノードを示します

• E:empty: 子が存在しないことを示しますE 要素内のノード。

• E:first-child: E

の親要素の最初の子ノードを表します

• E:last-child: E

の親要素の最後の子ノードを表します

• E:first- of -type: E

の親要素内のタイプ E の最初の子ノードを表します

• E:last-of-type: E

の親要素内のタイプ E の最後の子ノードを表します

• E: only-child: E の親要素に子ノードが 1 つだけ存在することを示します。

• E:only-of-type: E の親要素には子ノードが 1 つだけあり、この一意の子ノードの型は E でなければならないことを示します。

• 【備考】
互換性は次のとおりです:

*初心者が学習するとき、少し混乱するかもしれません（特に、QAQの私のように非科学的な背景を持つ人）。このセレクターの原理を理解してください。ここでは、DOM とノードの概念について少しの基本知識があれば理解できます。 まず、ここで子ノードとは要素ノードを指し、計算時は0ではなく1からカウントされ、計算時にテキストノードは含まれません。 DOM のツリー構造の特性により、条件を満たす E 要素 (

要素など) を見つける必要がある場合、このセレクターの方法は次のとおりです。まず、< を見つけます。 ;p> 要素を探し、それが 要素であると仮定して、

要素の親を見つけます。結論から言えば、「息子??父??息子」という検索順になっているのですが、その原理はよくわかっていないので、まずは全部検索してみます。

要素は同じレベルのノードで 1 つだけ検索する必要がありますか?この問題についてもよくわかりません。 *

疑似クラスセレクター

E:target は、現在の URL フラグメントの要素タイプを示します。この要素は E

である必要があります。

• E:disabled は、クリックできないフォーム コントロールを示します

• E:enabled。クリックされたフォームコントロール

• E:checkedはチェックされたチェックボックスまたはラジオを意味します

• E:first-lineはE要素の最初の行を意味します

• E:first-letterは最初の行を意味しますE 要素内の行 文字

• E::selection は、ユーザーがテキストを選択したときに E 要素が存在することを意味します

• E::before は E 要素の前にコンテンツを生成します

• E::after はコンテンツを生成しますE 要素の後

• E:not(s) は E 要素が一致しないことを意味します

• E~F は E 要素に隣接する F 要素を意味します

注意すべき点は、:before と ::before、:after と ::after は同じ意味ですが、: は CSS2 の書き方であり、:: は CSS3 の書き方です。詳しくは、 MDN ドキュメントを確認できます。

概要

上記は基本的に CSS3 セレクター (CSS1 および CSS2 を含む) の一般的なセレクターです。セレクターのより完全なリストについては、W3C ドキュメント: CSS セレクター リファレンスを確認してください。