擬似要素は子供であることを少し思い出させてください。

擬似要素：それは子供の要素のように見えますが、これとはまったく異なります

子要素を含む容器を見てみましょう。

<div class="container">
  <div>アイテム</div>
  <div>アイテム</div>
  <div>アイテム</div>
</div>

次のスタイルを追加する場合：

 .container :: before {
  コンテンツ： "x";
}

効果は次のとおりです。

<div class="container">
  [[[::擬似要素の前]]]]
  <div>アイテム</div>
  <div>アイテム</div>
  <div>アイテム</div>
</div>

擬似要素の挙動は、ほとんどの場合、子供の要素の動作に似ています。ただし、重要な違いは、他のセレクターが作成するセレクター（または::beforeまたは::afterなどの類似のセレクター）を除いて、他のセレクターを直接選択できないことです。

たとえば、コンテナを2x3グリッドに設定し、各子供要素がピルのようなデザインであるとします。

 。容器 {
  ディスプレイ：グリッド;
  Grid-Template-Columns：1FR 1FR;
  グリッドギャップ：0.5rem;
}

.container> * {
  背景：DarkGray;
  ボーダーラジウス：4px;
  パディング：0.5rem;
}

擬似要素がない場合、効果は予想通りです。しかし、擬似要素を追加した後、グリッドレイアウトに参加することがわかりますが、これは予想外かもしれません。擬似要素は装飾的な目的に使用されることがよくあり、コンテンツレイアウトに参加するのは少し奇妙に思えます。

.container > *セレクターは、擬似要素をこのように選択できないため、擬似要素の濃い灰色にもなりません。これは別の小さな問題です。

毎日の開発では、擬似要素は通常、 position: absolute使用します。

 .container :: before {
  コンテンツ： "";
  位置：絶対;
  /*装飾スタイル*/
}

この場合、擬似要素の存在にまったく気付かないかもしれません。それはまだ技術的には子供の要素であり、DOM構造に参加していますが、グリッドレイアウトには参加しません。これは、CSSグリッドに固有の現象ではありません。 FlexBoxでは、擬似要素もフレックスプロジェクトになります。フローティングやその他のレイアウト方法を使用するのが好きなように、擬似要素を制御できます。

開発者ツールは、擬似要素がDOMの子要素に似ていることを明確に示しています。

他にもいくつかの問題があります：

1つは:nth-child() selectorです。擬似要素が子要素である場合、それらは次のように影響すると思うかもしれません:nth-child()計算はそうで​​はありません。これはつまり：

 .container>：nth-​​child（2）{
  背景：赤;
}

::before擬似要素が存在するかどうかに関係なく、同じ要素が選択されます。同じことが::after 、 :nth-last-childなどのセレクターにも当てはまります。これがタイトルの「ちょっと」という理由です。擬似要素が子要素とまったく同じ場合、これらのセレクターに影響します。

別の問題は、通常の子供の要素を選択するように、JavaScriptで擬似要素を選択できないことです。 document.querySelector(".container::before"); nullを返します。 JavaScriptで擬似要素のスタイルにアクセスする必要がある場合は、CSSOMを使用できます。

 const styles = window.getComputedStyle（
  document.queryselector（ '。コンテナ'）、
  '：：前に'
）;
console.log（styles.content）; // "x"
console.log（styles.color）; // RGB（255、0、0）
console.log（styles.getPropertyValue（ 'color'））; // RGB（255、0、0）

擬似要素に関する他の問題に遭遇しましたか？

以上が擬似要素は子供であることを少し思い出させてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。