7 CSS偽元素選擇器

2022-06-19 20:45:14 字數 690 閱讀 9728

學習偽元素選擇器之前,我們要先了解一下什麼是」偽元素「

偽元素 字面理解就是 假的元素,指的是並非由我們自己寫的元素,而是系統自己寫的元素,它並不會顯示出來。

與之相對的 就是 真的元素,指的就是由我們自己寫的元素,它就是平常我們在**中能看到的那些元素。

在html的標籤中,系統會給每個標籤都加上兩個偽元素

即:開始:< before >

結束:< after >

不管是真元素還是偽元素,它們都是元素,都擁有元素該有的特性。是元素我們就能夠去改變它的內容、新增它的樣式。

就像真元素改變樣式時要使用各種對應的選擇器,要改變偽元素的內容和樣式,也需要用到選擇器,它使用的是偽元素選擇器。

偽元素選擇器

格式:基本選擇器::before

​ ​ ​ ​ ​ ​ ​ ​ ​ ​ 基本選擇器::after

意義:表示 這個基本選擇器 所對應的元素內的 < before >標籤(< after >標籤)使用宣告中的樣式。

以上所講的< before >和< after >偽元素,適用於所有html元素。

而針對塊級元素,還會有其他的一些偽元素。

塊級元素的偽元素

第乙個字母:first-letter

第一行:first-line

< first-letter >

< first-line >

7 CSS屬性選擇器

可以為擁有指定屬性的 html 元素設定樣式,而不僅限於 class 和 id 屬性。注釋 只有在規定了 doctype 時,ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中,不支援屬性選擇。下面的例子為帶有 title 屬性的所有元素設定樣式 title 下面的例子為 title ...

CSS選擇器 偽元素選擇器

css選擇器 偽元素選擇器 偽元素以 開頭,用在選擇器後,用於選擇指定的元素。after選中之後的不存在的節點,可配合content屬性進行內容填充 section h3 after before選中之前的不存在的節點,可配合content屬性進行內容填充 section h3 before fir...

Web前端 7 css 選擇器

1.選擇器格式 選擇器其中選擇器也叫選擇符 1 這裡的宣告是以 屬性 值 的形式,而且多個宣告之間用分號進行分割 2 例如 h1 h1 就是選擇器,當然這裡我們直接用標籤當做選擇器了 color,屬性取值為red font size屬性取值為 14個畫素。其中color red 就可以理解為乙個宣告...