選擇符,是根據元素特徵來定位。因此,元素標籤與屬性,以及位置都可以當做選擇符來使用。
選擇符種類很多,常用的有以下八種:
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標籤文本爲粉色