CSSプロパティの詳しい説明

WBOY
リリース: 2016-06-24 11:39:21
オリジナル
1150 人が閲覧しました

CSS 疑似クラスは、特定のセレクターに特殊効果を追加するために使用されます。

CSS 疑似要素は、特定のセレクターに特殊効果を追加するために使用されます。

2 つの点を明確にできます。1 つ目は、両方ともセレクターに関連しているということ、2 つ目は、いくつかの「特別な」効果を追加するということです。ここで特に言及しているのは、この 2 つが他の CSS では記述できないものを記述していることです。

疑似クラス型

疑似要素型

違い

ここでは、比較のために疑似クラス:first-childと疑似要素:first-letterを使用します。

p>i:first-child {color: red}<p><i>first</i><i>second</i></p>
ログイン後にコピー

//Pseudo class :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>
ログイン後にコピー

つまり、最初の文字にスパンを追加し、そのスパンにスタイルを追加します。
両者の違いが出てきました。つまり、

疑似クラスの効果は実際のクラスを追加することで実現できますが、疑似要素の効果は実際の要素を追加することで実現する必要があるのが、その一方が疑似クラスと呼ばれる理由です。その他は擬似要素と呼ばれます。

まとめ

擬似要素と擬似クラスが混同されやすいのは、効果や書き方が似ているからですが、実は両者を区別するためにCSS3では擬似クラスを明確に規定しています。はコロンで表され、擬似要素は 2 つのコロンで表されます。

:Pseudo-classes  ::Pseudo-elements
ログイン後にコピー

しかし、互換性の問題により、ほとんどの場合はまだ単一のコロンが使用されています。ただし、互換性の問題に関係なく、書くときは良い習慣を身につけ、この 2 つを区別するように最善を尽くす必要があります。


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート