css伪类与伪元素区别
偽類
偽類就是一種虛構的狀態或者說是一個具有特殊屬性的元素可以使用CSS進行樣式修飾。
偽類選擇元素基于的是當前元素處于的狀態,或者說元素當前所具有的特性,而不是元素的id、class、屬性等靜態的標志。由于狀態是動態變化的,所以一個元素達到一個特定狀態時,它可能得到一個偽類的樣式;當狀態改變時,它又會失去這個樣式。由此可以看出,它的功能和class有些類似,但它是基于文檔之外的抽象,所以叫偽類。
特點:
1.獲取不存在與DOM樹中的信息。比如a標簽的:link、visited等,這些信息不存在與DOM樹結構中,只能通過CSS選擇器來獲取;
2.獲取不能被常規CSS選擇器獲取的信息。
3.使用單冒號:
偽元素
偽元素,是在 DOM 樹中創建了一些抽象元素,這些抽象元素是不存在于文檔流 中的。
偽元素是對元素中的特定內容進行操作,它所操作的層次比偽類更深了一層,也因此它的動態性比偽類要低得多。實際上,設計偽元素的目的就是去選取諸如元素內容第一個字(母)、第一行,選取某些內容前面或后面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文檔中,所以叫偽元素。
特點:
1.css3規定使用雙冒號(::)表示
2.由于兼容性問題,所以現在大部分還是統一單冒號(:),因為除了IE8及其以下版本不支持雙冒號(::)外,其他都支持。
常見的幾種偽元素是: :after , :before 以及 :first-letter。
根本區別:是否創建了新元素
總結
以上是生活随笔為你收集整理的css伪类与伪元素区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端页面速度统计方法
- 下一篇: arr.sort的排序原理