這篇文章主要講解了“CSS選擇器的種類和作用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS選擇器的種類和作用”吧！
創(chuàng)新互聯(lián)建站是專業(yè)的祁陽網(wǎng)站建設(shè)公司，祁陽接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行祁陽網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
首先說主要都有哪些先擇器
1.標(biāo)簽選擇器（如：body,div,p,ul,li）
2.類選擇器（如：class="head",class="head_logo"）
3.ID選擇器（如：id="name",id="name_txt"）
4.全局選擇器（如：*號）
5.組合選擇器（如：.head .head_logo,注意兩選擇器用空格鍵分開）
6.繼承選擇器（如：div p,注意兩選擇器用空格鍵分開）
7.偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態(tài)：link、visited、active、hover。）
8.字符串匹配的屬性選擇符(^ $ *三種，分別對應(yīng)開始、結(jié)尾、包含)
在標(biāo)簽內(nèi)寫入style=" "的方式，應(yīng)該是CSS的一種引入方式，而不是選擇器，因?yàn)楦揪蜎]有用到選擇器。
我們分別來看下這些選擇器：
1：標(biāo)簽名選擇器
一個(gè)XHTML文檔中有許多標(biāo)簽，例如p標(biāo)簽，h2標(biāo)簽等。若要使文檔中的所有p標(biāo)簽都使用同一個(gè)CSS樣式，就應(yīng)使用標(biāo)簽選擇器。
代碼如下:
div {color:red;border:1px blue solid;}
p {color:#000;}
2：類選擇器
使用標(biāo)簽選擇器可以為整個(gè)XHTML文檔中的同一個(gè)標(biāo)簽指定相同的CSS樣式。但是在實(shí)際運(yùn)用中，XHTML文檔中的同一個(gè)標(biāo)簽會被反復(fù)使用。若要為相同的標(biāo)簽賦予不同的CSS樣式就應(yīng)使用類選擇器。
代碼如下:
在html文檔里，我們在要控制樣式的標(biāo)簽的開標(biāo)簽（非成對標(biāo)簽如input直接放在標(biāo)簽里）里加入 class="xxx",在頁面對應(yīng)的css文件里，用.xxx就可以指向這個(gè)標(biāo)簽，從而對這個(gè)標(biāo)簽進(jìn)行控制，我們稱這種通過定義類（class）來找到標(biāo)簽的方式為 ：類選擇器。
這種定義class 的方式是前端開發(fā)最常用的選擇器，有幾個(gè)突出的特點(diǎn)：可以給不同的標(biāo)簽設(shè)置同一個(gè)類，從而用一條CSS命令控制幾個(gè)標(biāo)簽，減少大量代碼，是頁面修改簡單，易維護(hù)，易改版；其次，后臺工作人員機(jī)會不會用到有關(guān)class的相關(guān)設(shè)置，不需要跟后臺人員之間進(jìn)行交互；再者，可以通過js等動態(tài)改變標(biāo)簽的Classname，從而改變整個(gè)標(biāo)簽的樣式，使前端動態(tài)效果實(shí)現(xiàn)起來更為容易。
3：ID選擇器
ID選擇器和類選擇器相似，不同的是，ID選擇器不能復(fù)用。在一個(gè)XHTML文檔中，一個(gè)ID選擇器只能把其CSS樣式指定給一個(gè)標(biāo)簽。
代碼如下:
有 ID 的 HTML元素可以被JavaScript來操縱.再就是ID也是后臺開發(fā)人員會經(jīng)常用的，所以前端開發(fā)人員應(yīng)該盡量少的使用。
4.全局選擇器
全局選擇器是一個(gè)星號。它能作用于XHTML文檔中的所有元素。
代碼如下:
*{margin:0; padding:0;}
5.組合選擇器
標(biāo)簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標(biāo)簽選擇器和類選擇器組合，標(biāo)簽選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣，所以只介紹標(biāo)簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式，并不算是一種真正的選擇器，但在實(shí)際中經(jīng)常使用。
比如 .orderlist li {xxxx} 或者 .tableset td {}
我們使用的時(shí)候一般用在重復(fù)出現(xiàn)并且樣式相同的一些標(biāo)簽里，比如 li td dd等。
比如
代碼如下:
.test1,span,test2 {border:1px blue solid;}
div,span,img {border:1px blue solid;}
群組選擇器實(shí)際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。
6.繼承選擇器
學(xué)習(xí)使用繼承選擇器就必須先了解文檔樹和CSS的繼承。每個(gè)XHTML都可以被看作一個(gè)文檔樹，文檔樹的根部就是html標(biāo)簽，而head和body標(biāo)簽就是其子元素。在head和body里的其他標(biāo)簽就是html標(biāo)簽的孫子元素。整個(gè)XHTML就呈現(xiàn)一種祖先和子孫的樹狀關(guān)系。CSS的繼承是指子孫元素繼承祖先元素的某些屬性。以下通過實(shí)例來詳細(xì)講解這兩個(gè)重要的CSS概念。
文檔樹 CSS的繼承 繼承選擇器
代碼如下:
后代選擇器實(shí)際上是使用：多個(gè)選擇器加上中間的空格來找到具體的要控制標(biāo)簽；從左往右，依次細(xì)化，最后鎖定要控制的標(biāo)簽，如上例，先找到class為test的標(biāo)簽，再從他的子標(biāo)簽里查找span標(biāo)簽，再從span的子標(biāo)簽中找到IMG標(biāo)簽。
7.偽類選擇器
偽類也是選擇器的一種，但是用偽類定義的CSS樣式并不是作用在標(biāo)簽上的。偽類作用在標(biāo)簽的狀態(tài)上。由于很多瀏覽器支持不同類型的偽類，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，所以很多偽類都不常被用到。偽類包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一組偽類是主流瀏覽器都支持的，就是超鏈接的偽類，包括:link:、:visited、:hover和:active。
a的這四個(gè)偽類，分別表示了a的四種狀態(tài)，要注意的是，a可以只具有一種狀態(tài)（:link），或者同時(shí)具有2種或者三種狀態(tài)！比如說，任何一個(gè)有HREF屬性的a標(biāo)簽，在未有任何操作時(shí)都已經(jīng)具備了:link的條件，也就是滿足了有鏈接屬性這個(gè)條件；如果訪問過的a標(biāo)簽，同時(shí)會具備 :link :visited 兩種狀態(tài)。把鼠標(biāo)移到訪問過的a標(biāo)簽上
8.字符串匹配的屬性選擇符--主要有三種
語法：E[att^="val"] ： {attribute}
說明：匹配具有att屬性、且值以val開頭的E元素
代碼如下:
匹配具有att屬性、且值以val開頭的E元素
語法:E[att$="val"] ： {attribute}
說明：匹配具有att屬性、且值以val結(jié)尾的E元素
代碼如下:
匹配具有att屬性、且值以val結(jié)尾的E元素
語法:E[att*="val"] ： {attribute}
說明：匹配具有att屬性、且值中包含val的E元素。
代碼如下:
匹配具有att屬性、且值中含有val的E元素
感謝各位的閱讀，以上就是“CSS選擇器的種類和作用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS選擇器的種類和作用這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
