1、e::first-letter文字的第乙個字母或字(如中文、日文、韓文等)
p {width: 200px;
padding: 5px 10px;
border: 1px solid#ddd;
font: 14px/1.5simsun;
p::first-letter {
float: left;
font-size: 40px;
font-weight: bold;
line-height: 1;
今天,陽光明媚,晴空萬里,非常適合戶外活動,如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。
2、e::first-line 文字第一行;
p {width: 200px;
padding: 5px 10px;
border: 1px solid #ddd;
font: 14px/1.5simsun;
p::first-line {
color: #090;
今天,陽光明媚,晴空萬里,非常適合戶外活動,如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。
3、e::selection 可改變選中文字的樣式;
p::selection {
background: #000;
color: #f00;
你選中這段文字後,看看它們的文字顏色和背景色,就能明白::selection的作用。
4、e::before和e::after
在e元素內部的開始位置和結束位建立乙個元素,該元素為行內元素,且必須要結合content屬性使用。
p::before {
background: #fff;
color: red;
content: "如果你的能看到這段文字,說明你的瀏覽器支援e:before和e::before";
font-size: 14px;
p::after {
background: #fff;
color: pink;
content: "如果你的能看到這段文字,說明你的瀏覽器支援e:after和e::after";
font-size: 14px;
我是乙個段落
e:after、e:before 在舊版本裡是偽元素,css3的規範裡「:」用來表示偽類,「::」用來表示偽元素,但是在高版本瀏覽器下e:after、e:before會被自動識別為e::after、e::before,這樣做的目的是用來做相容處理。
e:after
、e:before
後面的練習中會反覆用到,目前只需要有個大致了解
":"
與"::"
區別在於區分偽類和偽元素
****相關**(day5-15偽元素選擇器.html)
今天,陽光明媚,晴空萬里,非常適合戶外活動,如踏青、遠足之類的。長期坐在辦公室的同學們要多注意運動。
你選中這段文字後,看看它們的文字顏色和背景色,就能明白::selection的作用。
相關效果(-)
****相關**(day5-16after和before偽元素選擇器.html)
我是乙個段落
相關效果(二)
屬性選擇器,偽類選擇器,偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
偽元素選擇器 屬性選擇器 兄弟元素選擇器
一 偽元素 使用偽元素來表示元素中的一些特殊位置 常用 1 first letter 為元素中的第乙個位置設定樣式 2 first line 為元素中的第一行位置設定樣式 3 before 為元素最前邊的部分設定樣式 一般before都需要結合屬性content樣式一起使用 通過content可以向...
CSS選擇器 偽元素選擇器
css選擇器 偽元素選擇器 偽元素以 開頭,用在選擇器後,用於選擇指定的元素。after選中之後的不存在的節點,可配合content屬性進行內容填充 section h3 after before選中之前的不存在的節點,可配合content屬性進行內容填充 section h3 before fir...