擬似要素と擬似クラス

擬似要素

  擬似共通要素:(コンテンツ要素を追加する前)の前に、(コンテンツ要素を追加した後)の後、

  擬似要素が使用されていません。まず、文字(テキストの最初の文字に特別なスタイルを追加)、ファーストライン(特別なスタイルのテキストを追加するための最初の行)。

  使用シナリオ:クラス名の活動の追加効果。このアクティビティクラス擬似クラス名は、それがJSダイナミックスイッチングクラス名とすることができるさせてもよいです

  使用法:すぐセレクタの後にダブルコロンなど、スペースなし、と.author ::前

  

  これは、擬似要素の古典的な使用である、クラス活動に結合、この擬似要素、そしてここで、このアクティビティクラスは擬似クラスのホバーによって引き起こされる、と注意するための3つのポイントがあります。スペースなしのコロンの周りには、書き込まれる内容をプロパティ;ダミー要素はDOMに縛られていないとして、任意の表示幅と高さをブロックするように書き込みを行うために必要な次のように最終的な結果は以下のとおりです。

  

  また、擬似要素が複数の選択肢をバインドどのような影響を測定します:

  

  ::ホバー.TESTクラスセレクタが懸念され、完全な3擬似要素が結合、それがどのように動作するか参照してください?

  

  圧力、存在しないことがわかるセレクタを添加してもよいし、擬似要素擬似クラスの複数両方の前と後に添加して、絶対位置である場合、z屈折率後のデフォルトは以前よりも高くなります。

 

2.擬似クラス

  共通の擬似クラス:ホバー(マウスが中断された場合)、アクティブ(マウスクリック)。

  異常な擬似クラス:リンク(リンク未訪問)は、(訪問リンク)を訪問しました。

  使用场景:鼠标悬浮或点击时的效果;

  用法:单冒号紧接在选择器后面,没有空格,如.author:hover

  

  在上述代码中,我们预期的效果:悬浮变黑,点击变红。获得的效果如下:

  

  如果我们把两个伪类的顺序调换一下呢?看看会发生什么:

  

  

  可以看到,悬浮上去仍然会变黑,但是点击不变红,换句话说:伪类顺序的改变引起了效果的紊乱

  

总结

  1.伪类与伪元素的根本区别在于它们是否创造了新的元素,伪元素创造了新的非DOM元素,而伪类只是在已有的元素上添加类别而已。

  2.伪元素并不的好处是不需要为了一些视觉效果在HTML中添加多余的DOM,需要注意的是伪元素只为视觉效果而生,它不能也不应该涉及任何逻辑。

  3.当为一个选择器添加多个伪类的时候,顺序不能变(link --> visited -->  hover --> active),尤其是常用的伪类中,hover一定要写在active前面

おすすめ

転載: www.cnblogs.com/zhangnan35/p/10950529.html