1.偽類選擇器概述
在css中,可使用偽類選擇器把相同的元素定義成不同的樣式,如針對p元素,可以做以下定義。
p.right
p.center
在css中,除了上述類選擇器之外,還有一種偽類選擇器,這種偽類選擇器與類選擇器的區別是,類選擇器可以隨便起名,如上面的p.right和p.center,也可以命名為p。class1和p.class2,然後在頁面上使用"class=『class1』 "與"class=『class2』 ",但是偽類選擇器是css中已經定義好的選擇器,不能隨便起名。在css中我們最常用的偽類選擇器是使用在a(錨)元素上的幾種選擇器,他們的使用方法如下所示。
a:link
a:visited
a:hover
a:active
2.偽元素選擇器概述
偽元素選擇器是指並不是針對真正的元素使用的選擇器,而是針對css中已經定義好的偽元素使用的選擇器。在css中,主要有一下四個偽元素選擇器。
(1)、first-line偽類元素選擇器
first-line偽元素選擇器用於向某個元素中的第一行文字使用樣式。
例:
效果如圖:這是段落的第一行
這是段落第二行
(2).first-letter偽元素選擇器
first-letter偽元素選擇器用於向某個元素中的文字的首字母(歐美文字)或第乙個字(中文或日文等漢字)使用樣式。
例:
效果如圖:hello world!
歡迎來到新世界
在示例中有兩段文字,一段是英文,一段是中文使用first-letter偽元素選擇器可將兩個段落的開頭字母或文字顏色設定紅色。
(3).before偽元素選擇器
before偽元素選擇器用於在某個元素之前插入一些內容。使用方法如下
//可以插入一段元素
《元素》:before
//也可以插入其他內容
《元素》:before
例:
效果如圖:
在本示例中有乙個ul列表,使用before在該列表前加*
(4).after偽元素選擇器
after偽元素用於在某個元素之後插入一些內容,使用方法如下
《元素》:after
//也可以插入其他內容
《元素》:after
例:
效果如圖:
在本示例中有乙個ul列表,使用after在該列表後加*
CSS3之偽元素選擇器和偽類選擇器
偽類選擇器,和一般的dom中的元素樣式不一樣,它並不改變任何dom內容。只是插入了一些修飾類的元素,這些元素對於使用者來說是可見的,但是對於dom來說不可見。偽類的效果可以通過新增乙個實際的類來達到。a link a visited a hover a active在 css 定義中,a hover...
CSS3新增 結構偽類選擇器 偽元素選擇器
1.結構偽類選擇器 可方便的選取乙個或多個特定的元素 first child 選取屬於其父元素的首個子元素 last child 選取屬於其父元素的最後乙個子元素 nth child n 選擇第n個子元素 n even 2n 選取偶數孩子 n odd 2n 1 選取奇數孩子 2.偽元素選擇器 fir...
CSS3偽元素選擇器
css3偽元素選擇器 css3偽元素選擇器有兩種 分別是 before和 after,下面我們分別進行介紹 先介紹一下使用的注意事項 1.他們本身就是乙個元素 盒子 使用的時候相當於是在原先的div所建立的盒子裡增加新的 小盒子 可以定義其屬性但是預設的只是行內元素。2.before和after所代...