css偽類選擇器詳細解析及案例使用 偽元素

2022-08-31 12:21:12 字數 851 閱讀 6364

偽元素:(css3中將所有偽元素前變成了兩個冒號,即::first-letter、::first-line、::before、::after、::selection。目的是為了區分偽元素與偽類。對於ie6~ie8,僅支援單冒號寫法)

1.::first-letter  :用來選擇文字塊的第乙個首字母。

2.::first-line :用來匹配元素的第一行文字。

3.::befor 和 ::after :建立乙個作為當前元素子元素的偽元素。常通過content屬性來為乙個元素新增修飾性的內容。 此元素預設為行內元素。:before和:after偽元素指定了位於乙個元素的文件樹內容之前和之後的內容的位置。

a. :before和:after偽元素會從文件樹中它們附著的元素上繼承所有可繼承的屬性。不可繼承的屬性,屬性值為初始值。

b. :before和:after偽元素會與其它盒相互影響,就像它們是插在其相關元素裡的真實元素一樣。  

c. 本規範並沒有完整定義:before和:after偽元素對可替換元素(例如html中的img)的相互影響。這會在將來的規範中詳細定義。(這裡的規範指css2.1)。

d. 下方的**,使用偽元素清除浮動。(這裡有個問題是,為什麼要設定visibility、font-size、height、zoom這幾個屬性。我在chrome瀏覽器下去掉這幾個屬性後,仍然清除了浮動)

.clearfix:after 

.clearfix

4. ::selection :用來匹配突出顯示的文字(被選中的文字)。該偽元素僅接受兩個屬性:background與color。僅ie9支援,ff需加上-moz字首,webkit核心瀏覽器支援。

CSS選擇器及偽類

important 在屬性的後面寫上時,會覆蓋掉其他屬性 行內樣式,直接寫在標籤內 id選擇器 class選擇器 類選擇器 標籤選擇器 萬用字元選擇器 瀏覽器的自定義屬性和繼承 序號即是優先順序 title可以為任何值 title hello 根據部分屬性 title en 意為元素含有由空格分隔的...

CSS偽類選擇器

原來學習過css偽類選擇器,前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態,活動狀態,未被訪問狀態,已被訪問狀態,懸停效果。example a link a visited a hover a active fist ...

css偽類選擇器

link 設定超連結的預設樣式 例如 a a link 不推薦使用 有相容性 one link 不推薦使用 有相容性 visited 設定標籤被訪問過後的樣式 例如 a visited 注意 該偽類選擇器一般不會大量使用,因為瀏覽器存在快取問題。只能設定與顏色相關的屬性 hover 設定滑鼠懸停到標...