css疑似要素 selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

疑似クラス /* 疑似要素セレクター:

疑似要素の効果は、実際の要素を追加することで実現できます。 CSS には次の 4 つの疑似要素セレクターがあります: · :first-line: 要素内のテキストの最初の行にスタイルを使用します。 · :first-letter: テキストの最初の文字または最初の文字を使用します。要素 1 つの単語がスタイルを使用します。 · :before: 要素の前にコンテンツを挿入します。 */ p:first-line{background-color: yellow; :first-letter{color:blue;} p:before{content:"これは:";} p:after{content:"!終了";} /*

疑似クラス セレクター : DOM の一般的な要素スタイルとは異なり、DOM コンテンツは変更されません。

ユーザーには表示されますが、DOM には表示されない、変更された要素をいくつか挿入するだけです。 疑似クラスの効果は、実際のクラスを追加することで実現できます。

一般的に使用される疑似クラス セレクターは、a:link|a:visited|a:hover|a:active` などの a 要素で使用されます

ヒント: CSS 定義では、a:hover を設定する必要があります。 a:link および a:visit の後に有効です。 ヒント: CSS 定義で、a:active を有効にするには、a:hover の後に配置する必要があります。

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

:root() セレクター。文字通り、ルート セレクターとして明確に理解できます。これは、要素 E が配置されているドキュメントのルート要素と一致することを意味します。 HTML ドキュメントでは、ルート要素は常に です。 「:root」セレクターは、 要素に相当します。 :not() セレクターは、jQuery の :not セレクターとまったく同じで、特定の要素を除くすべての要素を選択できます。 :empty() セレクターは空を表します。コンテンツのない要素を選択するために使用されます。ここでの「コンテンツなし」は、スペースも含めてコンテンツがまったくないことを意味します。 :target() セレクターは、ページ上のターゲット要素のスタイルを指定するために使用されます (要素の ID はページ内のハイパーリンクとして使用されます)。このスタイルは、ユーザーがページ内のハイパーリンクをクリックした場合にのみ使用されます。要素 の後に機能します。 :first-child() セレクターは、親要素の最初の子要素の要素 E を選択することを意味します。簡単に理解すると、要素内の最初の子要素を選択することになります。これは子要素であり、子孫要素ではないことに注意してください。 :nth-child() は要素の 1 つ以上の特定の子要素を選択します。 :nth-child(length);/*パラメータは特定の数値です :nth-child(n);/*パラメータは n です, n は 0 から数え始めます :nth-child(n*length)/*n の倍数を選択し、n は 0 から数え始めます :nth-child(n+length);/* length より大きい length 以降の要素を選択します :nth -child(-n+length)/* length より小さい、length より前の要素を選択します :nth-child(n*length+1);/* 1 つおきの要素を選択することを示します // 上記の長さはan integer :nth-last-child () 親要素の最後の子要素から数えて、特定の要素を選択します。 :nth-of-type(n)” 親要素内の特定の型の子要素を見つけるためのセレクター */ :not(p){color:red;} :empty{width:100px;height: 20px ;background:red;display: inline-block;} :target{background:blue;} div p:first-child{background:gray;} div p:nth-child(2n){background: yellow }

疑似要素セレクター: CSS には次の 4 つの疑似要素を追加することで、疑似要素の効果を実現できます。 -要素セレクター: :first-line: 要素内のテキストの最初の行にスタイルを使用します。 · :first-letter: 要素内のテキストの最初の文字または最初の単語にスタイルを使用します。 · :before: 挿入します。要素の前にコンテンツを挿入します · :after: 要素の後にコンテンツを挿入します

AAAAAAAAA BBBBBBBB AAAAAA BBBBBBBB

1111

2222

333333

444444

&lt ;/div>