初識CSS-樣式選擇符的種類與特點

選擇符,是根據元素特徵來定位。因此,元素標籤與屬性,以及位置都可以當做選擇符來使用。

選擇符種類很多,常用的有以下八種:

1,標籤選擇符

用標籤名稱表示,用來描述網頁元素類型的,通常與其他選擇符組合使用,返回一組元素

p{text-align: center;}

2,id選擇符:

用#號表示,用來選擇網頁中用id屬性聲明的元素,只返回一個元素

#abc{color:red;}

3,類選擇符:

用.來表示,用來選擇使用了class屬性聲明的元素,通常返回一組相關元素

.abc{background-color:blue;}

4,屬性選擇符:

除了class和id和style以外的屬性,都可以使用

屬性放在一對方括號中,可同時指定多個屬性

還可以對屬性值進行正則查詢

[title="abc"]{font-size:20px;}

5,羣組選擇符:

可以設置多個元素公用樣式,用逗號分隔每個選擇符

h1,h2,h3,h4{font-weight:lighter;}

6,後代選擇符:

根據元素之間隸屬關係來選擇,多個選擇符之間,用空格分隔

section h1{color:red;}

將section元素下面所有的h1元素文本設置爲紅色

7,子代選擇符:

子代選擇符,只選擇當前元素直接子元素,用>號表示

子代選擇符,非常的複雜,裏面應用了大量的僞類元素,是我們學習的重點

div>h1{color:green;}

將div元素下面子集h1元素文本設置爲綠色

8,僞類選擇符:

僞類主要應用在特別標籤上,表示當前元素的狀態

例如a標籤的四種狀態:未訪問,已訪問,鼠標懸停,點擊中等

a:visited{color:gray;}

將訪問過的連接文本顏色設置爲灰色

9,僞元素選擇符:

僞元素選擇符主要有:first-letter和first-line

first-letter:設置段落首行的首字母樣式;

first-line:設置段落首行文本的樣子

10,通用和同輩選擇符:

通用選擇符星號*,同輩選擇符加號+

通用選擇符:*{font-size:12px;}設置網頁中文本均爲12像素;

同輩選擇符:p + a{color:pink;}設置p和相鄰a標籤文本爲粉色

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章