解析CSS中的偽元素及其與偽類的區別

2022-09-27 09:18:10 字數 941 閱讀 3210

偽元素

我們知道隨著css規範進一步完善,新增的css偽元素越來越多,但是在日常開發中,我們常用的及瀏覽器支援情況比較樂觀的當數before和after了。但是我們在日常開發中使用的都是:after 來清除浮動,及新增乙個元素(照顧到ie8瀏覽器這裡使用單冒號)。但是content的可取值有哪些呢?

1. 字串: content: 「a string」- 注意:特殊字元必須使用unicode編碼;

2. : content: url(/path/to/benjamin.png) – 以原始尺寸插入,不能調整大小。因支援漸變,因此可以對偽元素使用漸變效果;

3. 無字元: content: 「」- 這個在清除浮動和設定背景比較有用,我們可以設定背景的width和height,甚至我們可以使用background-size屬性來調整背景大小;

4. 計數器: content: counter(li)- 在:marker出現之前,對於設定列表序號樣式比較有用;具體參見下面**:

css code複製內容到剪貼簿

ps:我們不能設定content: 「

」,它不會解析按html**片段解析,而會解析為字串;

5. content: attr(attrname)

content可以利用attr函式獲取屬性值,尤其使用在偽類中比較方便。見如下**:

css code複製內容到剪貼簿

說了前面的話,下面說說ie中遇到的bug:

bug描述:使用偽類實現」+」/」-「號影象切換時,通過增加和移除opened類來實現,但是在ie8中效果怪異,無法正確渲染,其它瀏覽器中正常:

css code複製內容到剪貼簿

當通過addclass(『opened』)和removeclass(『opened』),來切換加減號時:ie8瀏覽器中效果沒有達到預期,部分樣式無程式設計客棧法覆蓋,現解決方案如下:

j**ascript code複製內容到剪貼簿

css 偽類 與 偽元素

偽類就是一種虛構的狀態或者說是一種具有特殊屬性的元素,可以使用 css 進行樣式修飾。偽類前面通常加乙個 之後跟上偽類的名字或括號裡面的值。常用的偽類 link visited hove active focus first child nth child 偽元素更像是虛擬的元素可以和 html 元...

css 偽類與偽元素

屬性 描述 link 向未被訪問的鏈結新增樣式。visited 向已被訪問的鏈結新增樣式。hover 當滑鼠懸浮在元素上方時,向元素新增樣式。active 向被啟用的元素新增樣式。focus 向擁有鍵盤輸入焦點的元素新增樣式。first child 向元素的第乙個子元素新增樣式 lang 向帶有指定...

CSS 偽類與偽元素

根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖 偽類與偽元素 css引入偽類和偽元素概念是為了格式化文件樹以外的資訊 偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。偽元素用於建立一些不在文件樹中的元素,並為其新增樣式。區別 偽類的操作物件是文件樹...