偽元素選擇器屬性介紹
•偽元素主要作用就是操作元素的文字和新增內容
•偽元素使用說明表
屬性描述
x:first-letter
設定x元素中的第乙個字。
x:first-line
設定x元素中的第一行字
x::before
在x元素最前面新增內容。
x::after
在x元素最後面新增內容。
first-letter實踐：
•使用first-letter屬性設定div文字第乙個字顏色為紅色。
從你的全世界路過效果圖：
first-line實踐：
•使用first-line屬性設定div標籤的文字第一行字顏色為紅色。
從你的全世界路過效果圖：從你的全世界路過
從你的全世界路過
before實踐
• 使用before屬性設定div標籤的文字前面新增「牛奶咖啡」2個字。
從你的全世界路過效果圖：
after實踐
•使用after屬性設定div標籤的文字最後面新增「牛奶咖啡」2個字。
從你的全世界路過效果圖：
• 結構偽類選擇器是用來處理一些特殊的效果。
•結構偽類選擇器屬性說明表
屬性描述
x:first-child
匹配x元素的第乙個子元素
x:last-child
匹配x元素的最後乙個子元素。
x:nth-child(n)
匹配x元素的第n個子元素
x:nth-child(2n)或者x:nth-child(even)
匹配x元素的偶數子元素。
x:nth-child(2n+1)或者x:nth-child(odd)
匹配x元素的奇數子元素。
x:only-child
匹配x元素中僅有乙個的子元素。
•使用first-child屬性設定
div第乙個
標籤文字顏色為藍色
從你的全世界路過
從你的全世界路過
從你的全世界路過
效果圖：
last-child實踐：
•使用last-child屬性設定div最後乙個標籤文字顏色為藍色
從你的全世界路過效果圖：從你的全世界路過
從你的全世界路過
•使用nth-child(n)屬性設定div標籤中的第四個lable標籤文字顏色為藍色。
從你的全世界路過效果圖：從你的全世界路過
從你的全世界路過
從你的全世界路過
nth-child(2n)實踐：
•使用nth-child(2n)屬性設定div標籤中的偶數標籤文字顏色為藍色。
從你的全世界路過效果圖：從你的全世界路過
從你的全世界路過
從你的全世界路過
•使用nth-child(2n+1)屬性設定ul標籤中的奇數li標籤文字顏色為紅色
從你的全世界路過效果圖：從你的全世界路過
從你的全世界路過
從你的全世界路過
•使用only-child屬性設定ul標籤中的僅有乙個li標籤文字顏色為紅色。
效果圖：
CSS3偽元素選擇器
css3偽元素選擇器 css3偽元素選擇器有兩種 分別是 before和 after，下面我們分別進行介紹 先介紹一下使用的注意事項 1.他們本身就是乙個元素 盒子 使用的時候相當於是在原先的div所建立的盒子裡增加新的 小盒子 可以定義其屬性但是預設的只是行內元素。2.before和after所代...
CSS3新增 結構偽類選擇器 偽元素選擇器
1.結構偽類選擇器 可方便的選取乙個或多個特定的元素 first child 選取屬於其父元素的首個子元素 last child 選取屬於其父元素的最後乙個子元素 nth child n 選擇第n個子元素 n even 2n 選取偶數孩子 n odd 2n 1 選取奇數孩子 2.偽元素選擇器 fir...
CSS3之偽元素選擇器和偽類選擇器
偽類選擇器，和一般的dom中的元素樣式不一樣，它並不改變任何dom內容。只是插入了一些修飾類的元素，這些元素對於使用者來說是可見的，但是對於dom來說不可見。偽類的效果可以通過新增乙個實際的類來達到。a link a visited a hover a active在 css 定義中，a hover...