3 選擇器 2 3偽元素選擇器

2021-08-03 21:48:37 字數 1812 閱讀 8644

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...