ホームページ > 記事 > ウェブフロントエンド > CSS 疑似クラスと疑似要素の違い
擬似クラスと擬似要素は文書構造から独立しています。要素を取得する方法は、ID、class、attributes などの基本的な要素の特性に基づいているのではなく、特別な state (擬似クラス) 内の要素、または要素内の特別なコンテンツ (擬似要素) に基づいています。 )。違いは以下にまとめられています:
CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
属性 | 説明 |
: アクティブ | アクティブ化された要素にスタイルを追加 |
: フォーカス | 要素にスタイルを追加します。キーボード入力フォーカス要素が追加されました スタイル |
:hover | マウスが要素上にあるときに要素にスタイルを追加します |
:link | 未訪問のリンクにスタイルを追加します |
:visited | 訪問済みリンクにスタイルを追加する |
:first-child | 要素の最初の子要素にスタイルを追加する |
:lang | 指定された lang 属性を持つ要素に追加する Style |
备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。
css 疑似要素 (疑似要素): 要素内の特定の内容を設定および操作する、特定のセレクターに特殊効果を設定するために使用されます。 操作レベルは疑似クラスよりも深いため、ダイナミクスは疑似クラスよりも悪いです。
プロパティ | 説明 |
:first-letter | テキストの最初の文字に特別なスタイルを追加します |
:first-line | 特別なスタイルを追加しますにテキストの最初の行 スタイル |
:before | 要素の前にコンテンツを追加します |
:after | 要素の後にコンテンツを追加します |
<a href="http%20://www.php.cn/wiki/1550.html" target="_blank">w3c<code><a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a>
对两者的定义:
CSS
伪类用于向某些选择器添加特殊的效果。
CSS
伪元素用于将特殊的效果添加到某些选择器。
这里用伪类 :first-child
和伪元素 :first-letter
来进行比较。
p>i:first-child {color: red}<p> <i>first</i> <i>second</i></p>
//伪类 :first-child
添加样式到第一个子元素
如果我们不使用伪类,而希望达到上述效果,可以这样做:
.first-child {color: red}<p> <i class="first-child">first</i> <i>second</i></p>
即我们给第一个子元素添加一个类,然后定义这个类的样式。那么我们接着看看伪元素:
p::first-letter {color: red}<p>I am stephen lee.</p>
//伪元素 ::first-letter
添加样式到第一个字母
那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?
.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>
即我们给第一个字母添加一个 span
,然后给 span
增加样式。
两者的区别已经出来了。那就是:
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3
2 つの定義:
CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。
CSS
擬似要素は、特定のセレクターに特殊効果を追加するために使用されます。 🎜:first-child
と疑似要素 が使用されています: 比較する最初の文字
。 🎜:Pseudo-classes ::Pseudo-elements🎜 //疑似クラス
:first-child
最初の子要素にスタイルを追加します::first-letter
最初の文字にスタイルを追加しますspan
を追加し、span
にスタイルを追加します。 🎜🎜擬似クラスの効果は実際のクラスを追加することで実現できますが、擬似要素の効果は実際の要素を追加することで実現する必要があります。 . これが、一方が擬似クラスと呼ばれ、もう一方が擬似要素と呼ばれる理由です。 🎜🎜
以上がCSS 疑似クラスと疑似要素の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。