當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3---选择器

發(fā)布時間：2025/4/14 CSS 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3---选择器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.結(jié)構(gòu)性偽類選擇器---：root：從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。

2.“:root”選擇器等同于<html>元素，簡單點說：:root{background:orange}與 html {background:orange;} 得到的效果等同。建議使用:root方法。

　　另外在IE９以下還可以借助“:root”實現(xiàn)hack功能

特別注意細節(jié)問題：當body{background：；}使用背景顏色，：root{}也使用背景顏色時，body里改變的只能是body里面內(nèi)容顏色，剩下的都是root里定義的顏色。如果：root里沒有指定背景顏色，則整體背景顏色為body定義的顏色。

3.:empty選擇器表示的就是空。用來選擇沒有任何內(nèi)容的元素，這里沒有內(nèi)容指的是一點內(nèi)容都沒有，哪怕是一個空格。p:empty {display: none;}?

4.:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。

5.:target選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。

　　1、具體來說，觸發(fā)元素的URL中的標志符通常會包含一個#號，后面帶有一個標志符名稱。

　　2、：target就是用來匹配id為“brand”的元素（id="brand"的元素）。

　　3、多個url（多個target）處理：就像上面的例子，#brand與后面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應就可以了。

　　4、

　　#brand:target { background: orange; color: #fff; }

　　#jake:target { background: blue; color: #fff; }

　　#aron:target { background: red; color: #fff; }

　　上面的代碼可以對不同的target對象分別設置不的樣式。

6.“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。

7.“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器，

8.“:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時，選擇器將選擇不到任何匹配的元素。

　　經(jīng)驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元素。

9.“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。

10.“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。

11.“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達式，還可以是關(guān)鍵詞。

12.“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個類型的最后一個子元素。

13.“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個子元素開始，而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)”選擇器一樣。

14.“:only-child”選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

15.::before和::after這兩個主要用來給元素的前面或后面插入內(nèi)容，這兩個常和"content"配合使用，使用場景最多的就是清除浮動。不過這個屬性對于img和input元素不起作用。

content配合CSS的偽類或者偽元素，一般可以做以下四件事情：

功能	功能說明
none	不生成任何內(nèi)容
attr	插入標簽屬性值
url	使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）
string	插入字符串

在CSS中有一種清除浮動的方法叫“clearfix”。而這個“clearfix”方法就中就使用了“content”，只不過只是在這里插入了一個空格。如下所示：

.clearfix:before,.clearfix:after {content:””;display:table;}.clearfix:after {clear:both;overflow:hidden;}

?插入元素屬性值的方法：

假設我們有一個元素：

可以通過”:after”和”content:attr(title)”將元素的”title”值插入到元素內(nèi)容“我是元素”之后：

a:after {content:attr(title);color:#f00;}
“：first-line” 選擇器匹配文本塊的首行。
“：first-letter” 選擇器選擇文本塊的首字母
在CSS3中除了結(jié)構(gòu)性偽類選擇器外，還有一種UI元素狀態(tài)偽類選擇器，這些選擇器在共同特點是：指定的樣式只有當前元素處于某種狀態(tài)下時才起作用，在默認狀態(tài)下不起作用。
在CSS3中，共有17種UI元素狀態(tài)偽類選擇器，分別是：E:hover E:active E:focus E:enabled E:disabled E:read-write E:read-only E:checked E:default
E:indeterminate E:selection E:invalid E：valid E:required E:optional E:in-range

16.在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復選框等。在默認情況之下，這些表單元素都處在可用狀態(tài)。

17.在表單元素中，單選按鈕和復選按鈕都具有選中和未選中狀態(tài)。（大家都知道，要覆寫這兩個按鈕默認樣式比較困難）。在CSS3中，我們可以通過狀態(tài)選擇器“:checked”配合其他標簽實現(xiàn)自定義樣式。而“:checked”表示的是選中狀態(tài)。

18.“::selection”偽元素是用來匹配突出顯示的文本。瀏覽器默認情況下，選擇網(wǎng)站文本是深藍的背景，白色的字體，有的設計要求不使用上圖那種瀏覽器默認的突出文本效果，需要一個與眾不同的效果，此時“::selection”偽元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。

19.“:read-only”偽類選擇器用來指定處于只讀狀態(tài)元素的樣式。簡單點理解就是，元素中設置了“readonly=’readonly’”

20.“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處于非只讀狀態(tài)時的樣式。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類選擇器</title><link href="index08.css" rel="stylesheet" type="text/css"> </head> <body><p>這是第一行內(nèi)容<br/>這是第二行內(nèi)容，哈哈哈哈哈哈</p><hr/><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><hr/> <h2>hello world!你好中國！ </h2><hr/><table border="1px"><tr><th>表格1</th><th>表格2</th><th>表格3</th></tr><tr><td>內(nèi)容1</td><td>內(nèi)容2</td><td></td></tr><tr><td></td><td>內(nèi)容2</td><td>內(nèi)容3</td></tr><tr><td>內(nèi)容1</td><td></td><td></td></tr></table><hr/><a href="#a1">菜單1</a><a href="#a2">菜單2</a><a href="#a3">菜單3</a><a href="#a4">菜單4</a><div id="a1"><h3>菜單內(nèi)容1</h3></div><div id="a2"><h3>菜單內(nèi)容2</h3></div><div id="a3"><h3>菜單內(nèi)容3</h3></div><div id="a4"><h3>菜單內(nèi)容4</h3></div> <hr/><div class="type1"><h3>標題1</h3><a>鏈接1</a><br/><a>鏈接2</a><h3>標題2</h3><h3>標題3</h3><a>鏈接3</a><h3>標題4</h3><a>鏈接4</a><h3>標題5</h3><a>鏈接5</a><h3>標題6</h3><a>鏈接6</a></div><hr/><input class="Text" type="text"name="name"><input class="Text" type="text"name="age"><input type="checkbox">金毛<input type="checkbox">薩摩耶<input type="checkbox">大狗狗<hr/><script>function radio_change() {var radio1=document.getElementById("radio1");var radio2=document.getElementById("radio2");var text=document.getElementById("text1");if(radio1.checked){text.disabled="";}else{text.value="";text.disabled="disabled"}}</script><div class="div"><input type="radio" id="radio1" name="radio" onchange="radio_change()">可用<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用<input type="text" id="text1" disabled></div></body> </html> :root{background-color:lightpink; } body{margin: 30px;counter-reset: paracount;/*默認初始值為1，也可指定其他值*/background-color: darkseagreen; } p:first-line{color: cornflowerblue; } p:first-letter{font-size: 30px;color: #ff6471; } li:before{counter-increment: paracount;/*默認增值為1，也可指定其他值*/content:counter(paracount)".";/*content: "-----";*/ } li:after{content: "*******";font-size: 10px;color: darkgray; } li:first-child{width: 150px;background-color: red; } li:last-child{width: 150px;background-color:darkviolet;/*紫色*/ } li:nth-child(3){width: 150px;background-color:yellow; } li:nth-last-child(2){width: 150px;background-color:lightblue; } /*li:nth-last-child(odd){!* 倒著數(shù)為奇數(shù)行改變顏色 odd為奇數(shù) even為偶數(shù) *!*//*width: 150px;*//*background-color:lightblue;*/ /*}*/ body *:not(h2){font-style: italic; } :empty{/*內(nèi)容為空白的時候運用這個樣式這里的例子是：表格內(nèi)容為空的時候背景顏色變?yōu)辄S色*/background-color: red; } table{border-collapse: collapse; } :target{background-color: #37b9ff;width: 200px; } .type1 h3:nth-of-type(odd){ /*只計算同類標簽*/width: 200px;color: yellow; } .type1 a:nth-last-child(odd){/*計算是把h3和a標簽一起進行計算的，也就是說所有子元素一起來計算所以要想只計算同一類型的的樣式需要使用 nth-of-type()*/width: 150px;color:lightblue ; } /*注意順序不能顛倒*/ .Text:hover{background-color: cornflowerblue; } .Text:focus{background-color: brown; } .Text:active{background-color: yellow; } input[type="checkbox"]:checked{outline:2px solid gold;background-color: blue; } .div input[type="text"]:enabled{background-color: yellow; } .div input[type="text"]:disabled{background-color: darkgray; }

轉(zhuǎn)載于:https://www.cnblogs.com/yuxingyoucan/p/5375376.html

總結(jié)

以上是生活随笔為你收集整理的CSS3---选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

选择器

上一篇：结对编程——四则运算
下一篇： JavaWeb总结(四)—JSP深入解析