新聞中心
CSS3 新增選擇器

CSS3 引入了許多新的選擇器,使得開發(fā)者可以更加靈活地選取和樣式化 HTML 元素,以下是一些主要的新增選擇器:
1. 屬性選擇器
屬性選擇器允許你根據(jù)元素的屬性和屬性值來選擇元素。
[attribute]: 選取帶有指定屬性的元素。
[attribute=value]: 選取帶有指定屬性和值的元素。
[attribute^=value]: 選取屬性值以指定文本開頭的元素。
[attribute$=value]: 選取屬性值以指定文本結(jié)尾的元素。
[attribute*=value]: 選取屬性值中包含指定文本的元素。
2. 結(jié)構(gòu)性偽類選擇器
結(jié)構(gòu)性偽類選擇器允許你根據(jù)元素在文檔樹中的位置或關(guān)系來選擇元素。
:root: 選取文檔的根元素。
:nthchild(n): 選取父元素的第 n 個子元素。
:nthlastchild(n): 選取父元素的倒數(shù)第 n 個子元素。
:firstchild: 選取父元素的第一個子元素。
:lastchild: 選取父元素的最后一個子元素。
:onlychild: 選取父元素的唯一子元素。
:nthoftype(n): 選取相同類型的父元素的第 n 個子元素。
:nthlastoftype(n): 選取相同類型的父元素的倒數(shù)第 n 個子元素。
:firstoftype: 選取相同類型的父元素的第一個子元素。
:lastoftype: 選取相同類型的父元素的最后一個子元素。
:onlyoftype: 選取相同類型的父元素的唯一子元素。
:empty: 選取沒有子元素的元素。
:not(selector): 選取不符合給定選擇器的元素。
:target: 選取當(dāng)前活動的 # 錨點元素。
3. UI狀態(tài)偽類選擇器
UI狀態(tài)偽類選擇器允許你根據(jù)元素的狀態(tài)(如鼠標(biāo)懸停、被點擊等)來選擇元素。
:hover: 選取鼠標(biāo)懸停在其上的元素。
:active: 選取被用戶激活的元素。
:focus: 選取具有焦點的元素。
:visited: 選取用戶已訪問的鏈接。
:enabled: 選取啟用的表單元素。
:disabled: 選取禁用的表單元素。
:checked: 選取被選中的單選框或復(fù)選框。
:default: 選取默認(rèn)的表單元素。
:indeterminate: 選取處于不確定狀態(tài)的表單元素(如多選復(fù)選框)。
以上就是 CSS3 新增的主要選擇器,使用這些選擇器可以讓你更精確地控制頁面元素的樣式。
網(wǎng)站名稱:CSS3新增了哪些選擇器?
文章起源:http://m.fisionsoft.com.cn/article/cdieico.html


咨詢
建站咨詢
