ホームページ > 記事 > ウェブフロントエンド > CSS のセレクターを詳しく見てみる

CSS のセレクターを詳しく見てみる

青灯夜游転載: 2021-07-22 11:15:002617ブラウズ

この記事では、CSS のセレクターを理解し、単純なセレクター、複合セレクター、複雑なセレクター、およびセレクターの優先順位の構文を紹介します。

CSS のセレクターを詳しく見てみる

セレクターの構文

まずセレクターの構文を理解してから、関連する構文を詳しく調べてみましょう。背景の特徴。

単純なセレクター

アスタリスク —— *
- ユニバーサルセレクター、任意の要素を選択できます
タイプセレクター|タイプセレクター —— div svg|a
- はタイプセレクターとも呼ばれ、要素内の tagName (タグ名) 属性を選択することを意味します。
- tagName は最も一般的に使用されるセレクターでもあります
- しかし、HTML にも名前空間があるため、主に 3 つの名前空間があります: HTML、SVG、MathML
- SVG または MathML で特定の要素を選択するには、単一の垂直バー | を使用する必要があります。CSS セレクターの単一の垂直バーは名前空間区切り文字であり、HTML の名前空間区切り文字はコロン:# です。 ##。次に、前述の名前空間を @namespace で宣言する必要があります。これらは一緒に使用されますが、この名前空間はあまり頻繁に使用されません。完全を期すためにのみ存在します。HTML と SVG の間で重複する唯一の要素です。名前は 1 つだけですa
- # したがって、型セレクターは単なる単純なテキスト文字列であると考えることができます
.
- これはクラスを選択します。区切り文字としてスペースを使用することもできます複数のクラスの場合、
- .class
ID セレクター
#id
- これは完全一致です
- 属性セレクター｜属性セレクター ——
[attr=value]
これには、クラス属性セレクターと ID セレクターが含まれています
- attr=value
- ここで等号の前に ~
- attr~= value 等号の前に 1 本の縦棒を追加すると、この属性が次の値で始まることを意味します: attr|=value
- 優先順位に関する特別な要件はありません。理論的には、属性セレクターを使用してクラスセレクターと ID セレクターを置き換えることができます。
疑似クラス
:hover :
- これは、私たちが作成する HTML とは何の関係もありません。主にインタラクションとエフェクトによるものです。
- ##疑似要素セレクター
—— ＃＃＃：：前に＃＃＃
一般に、二重コロン :: で始まるは実際には単一コロンの使用をサポートしていますが、私たちは二重コロンの記述方法を推奨します。
- 擬似要素は、本来存在しない要素を選択することに属します
- 複合セレクター

##* または div を先頭に記述する必要があります

まず、複合セレクターは複数の単純セレクターで構成されており、単純セレクターを並べて記述すれば複合セレクターになります。そのセマンティクスは、選択する要素が複数の単純なセレクターに同時に一致し、「AND」関係を形成する必要があるということです。

複合セレクター

複合セレクターの途中でコネクタを使用すると、複合セレクターになります。複合セレクターは、要素の構造に基づいて選択します。

—— 子孫セレクター、単一要素にはスペースの左側に親ノードまたは祖先ノードが必要です
">" —— 親子セレクタ。要素の直接上位の親要素である必要があります。
"~" —— 隣接セレクター
“ ” ——隣接セレクター
“||” —— 二重縦棒はセレクターレベル 4 でのみ利用可能です。テーブルを作成するときに、各列を選択できます

#セレクターの優先順位##私も行ってきました。前回の「実戦で学ぶブラウザの動作原理」でセレクタ優先度の概念を学びました。ここでは、セレクターの優先順位の概念を詳しく見ていきます。

単純なセレクターのカウントケースから始めます。セレクターの優先順位は、セレクターに含まれるすべての単純なセレクターです。カウントを作成します。したがって、セレクターリストの中央は、単純なセレクターのカウントを目的としたカンマ区切りの複雑なセレクターであるため、セレクターリストは完全なセレクター (つまり、カンマ区切りのセレクター) とみなされません。

例:

#id div.a#id

これには 2 つの ID セレクター、タイプセレクター、クラスセレクターが含まれます

特異性
配列の数に応じて [インラインスタイルの数,IDセレクター番号,クラスセレクターの数,tagName セレクターの数 ]この例では、
## を取得します。セレクターの標準では、このような説明があります。セレクターの優先度を表すために N ベースを使用します
大きな N を取り、次のように計算するだけです。セレクターの優先順位
を使用します。 $N=1000000 ##、次に S=2000001000001$ $#、これは、この例のセレクターの特異性優先度です$ # 古いバージョンの IE IE6 と同様、メモリを節約するために N の値が十分に大きくないため、値 255 が N として扱われるため、非常に興味深いことが起こります。たとえば、 Nの256クラスがIDに相当します。その後、ほとんどのブラウザーが 65536 を選択し、基本的にクォータを超えることはなくなりました。標準では比較的大きな値を使用できるとしか規定されていませんが、一時メモリの使用量の問題を考慮する必要があるため、16 進数の比較的整数を使用します。これは一般に 256 の整数乗です (256 はちょうど 256 であるため)。 1バイト）。

CSS 疑似クラス

疑似クラスは、実際には、非常に多くのコンテンツに対する単純なセレクターです。リンク/アクション

:any-link —— 任意のハイパーリンクと一致します
:link —— まだアクセスされていないハイパーリンク
:link :visited —— 訪問したすべてのハイパーリンクと一致します
:hover —— ユーザーのマウスが要素上に置かれた後の状態。ハイパーリンクに効果がありましたが、現在は多くの要素で使用できるようになりました。
:active - 以前はハイパーリンクにのみ効果がありました。クリックすると、現在のリンクが有効になります
:focus - これは、この要素のフォーカスの状態です。通常、入力タグに使用されます。実際、フォーカスを取得できる要素は、
:target を使用できます。 —— 現在のターゲットへのリンク。これはハイパーリンクには使用されませんが、アンカーポイントの a タグに使用されます。現在のハッシュは現在の a## タグを指します。 # タグは、 target 疑似クラス

:link または :visited を使用すると、テキストの色以外のプロパティが表示されます。この要素の変更はできなくなります。なぜこのように設計されているのでしょうか?レイアウト関連の属性を使用すると、たとえば :visited のサイズを大きくすると、スケジュールに影響を与えるためです。このようにして、JavaScript API を使用して、リンクが訪問されたかどうかを取得できます。しかし、リンクが訪問されたかどうかを取得できれば、ユーザーがどの Web サイトを訪問したかを知ることができ、これはブラウザのセキュリティにとって致命的な打撃となります。ここで皆さんに注意していただきたいのは、何か表現的なものを作ることと安全性がまったく関係ないと考えるのではなく、実際、安全性は総合的な考慮事項であるということです。 CSS もセキュリティホールを引き起こす可能性があります。

#ツリー構造

##:empty

:nth-child()
:nth-last-child()
(後ろから前に数えることを除く):first-child :last-child :only-child

は、構文をサポートする非常に複雑な擬似クラスです。たとえば、括弧内に奇数および偶数の

event
または odd を記述することができます。 4N 1、3N-1 と記述することもでき、それぞれ整数形式に一致します。これは比較的複雑なセレクターであるため、過度に複雑な式を書きたくないので、3 の場合は 1 つ多く、4 の場合は 1 つ多くなど、奇数と偶数の式を処理するためにのみ使用します。 実際には、empty
、

nth-last-child

、
last-child、only- child これら 2 つのセレクターは、「実装におけるブラウザーの原則の学習」で説明した CSS 計算のタイミングの問題を解決します。ラベルの計算を開始するとき、サブラベルがあるかどうかはまったくわからないと想像できます。 empty 影響は特に大きくありませんが、last-child の関係は実際には非常に影響力があります。したがって、ブラウジングはこれらを実装する際に特別な処理を行っており、ブラウザがそれをあまりうまく実装していないか、ブラウザが実装するためにより多くのパフォーマンスを必要としています。したがって、これらを大量に使用することは避けることをお勧めします。 論理型

:擬似クラスではありません - 主流のブラウザは、単純なセレクターのシーケンス (複雑なセレクター) のみをサポートします。複雑なセレクター構文を記述する方法はありません。:where :has ——これら 2 つの非常に強力な論理擬似クラスが CSS レベル 4

に追加されました。ここに皆さんへの温かい提案があります。
複雑すぎるセレクターを記述することはお勧めできません。

。セレクターの記述が複雑すぎる場合は、HTML の構造にある程度無理があることを意味します。これは、ブラウザプロジェクトやパフォーマンスの問題を回避するためだけでなく、独自のコード構造のためにも行われるため、過度に複雑なセレクターを使用しないようにします。

#CSS 疑似要素
#全部で 4 種類あります

#::before ::after

::first-line

::first-letter

::before
::after
content

content

の属性は実際の DOM 要素と同様で、ボックスを生成し、後続の組版とレンダリングに参加できます。したがって、border、background などの属性を彼に宣言できます。 は次のように理解できます: 擬似要素は、存在しない要素をインターフェイスに追加します。

::first-line と ::first-letter のメカニズムは異なります。この 2 つは実際にコンテンツ内に存在します。名前が示すように、「最初の行」を選択し、「最初の文字」を選択します。これらは存在しない要素ではなく、テキストの一部を囲んでいるため、テキストに対して何らかの処理を行うことができます。

前後

私たちの概念では、before 疑似要素を持つセレクターが実際にそれを選択すると考えることができます。要素のコンテンツの前に追加されます。コンテンツ属性を使用してテキストコンテンツを要素に追加するだけです。 (ここでは、疑似要素に content: '' を割り当てることもできます。これは空です。) したがって、別の要素と同じように、前後の表示属性を任意の方法で指定できます。

いくつかのコンポーネントを実装するとき、DOM ツリーを汚さずに実際に視覚効果を生み出すことができる方法で、この方法を使用して装飾的なコンテンツをページに追加することがよくあります。

<div>
  <::before/>
  content content content content
  content content content content
  content content content content
  content content content content
  <::after/>
</div>

first-letter and first-line

first-letter は、配置する要素があることと同じです。内の内容の最初の文字は括弧で囲まれます。この first-letter さまざまな属性を自由に宣言できますが、その内容を変更することはできません。新聞の最初の文字が大きくなり、浮き上がる効果を誰もが見たことがあると思います。CSS では、::first-letter 疑似要素セレクターを使用できます。これを使用して実装すると、JavaScript を使用するよりも安定し、コードがより洗練されます。

<div>
  <::first-letter>c</::first-letter>ontent content content content
  content content content content
  content content content content
  content content content content
</div>

first-line は、植字後の line を表します。実際、ソースコードの first line とは何の関係もありません。ブラウザーが異なるレンダリング幅を提供する場合、first-line は最終的に 2 つの環境で異なる数の要素を囲むことになります。したがって、このセレクターを使用する場合は、必要に応じて使用する必要があり、開発マシンとユーザーのマシンでのレンダリング効果が異なる可能性が非常に高くなります。

<div>
  <::first-line>content content content content content</::first-line>
  content content content content
  content content content content
  content content content content
</div>

これら 2 つのセレクターで使用できる属性も異なります:

最初の行で使用可能な属性

フォントシリーズ
カラーシリーズ
背景シリーズ
単語間隔
文字間隔
text-decoration
text-transform
line-height

##first-letter 利用可能なプロパティ

カラーシリーズ
背景シリーズ
テキスト装飾
テキスト変換
letter-spacing
word-spacing
line-height
float
vertical-align
ボックスモデルシリーズ: margin、パディング、ボーダー

小さな演習

match関数を作成します。これは 2 つのパラメーターを受け入れます。最初のパラメーターはセレクター文字列プロパティで、2 番目のパラメーターは HTML 要素です。この要素は DOM ツリー内に存在する必要があると考えることができます。セレクターと DOM 要素を使用して、現在の要素がセレクターと一致するかどうかを判断します。 (組み込みのブラウザ関数は使用できません。要素がセレクターと一致するかどうかを判断するには、DOM の親 API と子 API のみを使用します。) 以下は呼び出しの例です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Match Example —— by 三钻</title>
  </head>
  <body>
    <div>
      <b>
        <div class="class classA" id="id">content</div>
      </b>
    </div>
  </body>
  <script language="javascript">
    /**
     * 匹配选择器
     */
    function matchSelectors(selector, element) {
      // 先匹配当前元素是否匹配
      let tagSelector = selector.match(/^[\w]+/gm);
      let idSelectors = selector.match(/(?<=#)([\w\d\-\_]+)/gm);
      let classSelectors = selector.match(/(?<=\.)([\w\d\-\_]+)/gm);

      /**
       * 实现复合选择器，实现支持空格的 Class 选择器
       * --------------------------------
       */
      // 检查 tag name 是否匹配
      if (tagSelector !== null) {
        if (element.tagName.toLowerCase() !== tagSelector[0]) return false;
      }
      // 检测 id 是否匹配
      if (idSelectors !== null) {
        let attr = element.attributes[&#39;id&#39;].value;
        if (attr) {
          for (let selector of idSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }
      // 检测 class 是否匹配
      if (classSelectors !== null) {
        let attr = element.attributes[&#39;class&#39;].value;
        if (attr) {
          for (let selector of classSelectors) {
            if (attr.split(&#39; &#39;).indexOf(selector) === -1) return false;
          }
        }
      }

      return true;
    }

    /**
     * 匹配元素
     */
    function match(selector, element) {
      if (!selector || !element.attributes) return false;

      let selectors = selector.split(&#39; &#39;).reverse();

      if (!matchSelectors(selectors[0], element)) return false;

      let curElement = element;
      let matched = 1;

      // 递归寻找父级元素匹配
      while (curElement.parentElement !== null && matched < selectors.length) {
        curElement = curElement.parentElement;
        if (matchSelectors(selectors[matched], curElement)) matched++;
      }

      // 所有选择器匹配上为 匹配成功，否则是失败
      if (matched !== selectors.length) return false;

      return true;
    }

    let matchResult = match(&#39;div #id.class&#39;, document.getElementById(&#39;id&#39;));
    console.log(&#39;Match example by 三钻&#39;);
    console.log(&#39;matchResult&#39;, matchResult);
  </script>
</html>

プログラミング関連の知識については、

プログラミングビデオをご覧ください。！

以上がCSS のセレクターを詳しく見てみるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：知っておく価値のある 8 つの純粋な CSS レイアウトテクニック次の記事：知っておく価値のある 8 つの純粋な CSS レイアウトテクニック

続きを見る

CSS のセレクターを詳しく見てみる

セレクターの構文

#セレクターの優先順位##私も行ってきました。前回の「実戦で学ぶブラウザの動作原理」でセレクタ優先度の概念を学びました。ここでは、セレクターの優先順位の概念を詳しく見ていきます。

疑似クラスは、実際には、非常に多くのコンテンツに対する単純なセレクターです。 リンク/アクション

#::before ::after

小さな演習

関連記事

疑似クラスは、実際には、非常に多くのコンテンツに対する単純なセレクターです。リンク/アクション