建站
咨詢
售后
建站咨詢
新聞中心
css選擇器是前端css的基礎(chǔ)內(nèi)容，當(dāng)你靈活運(yùn)用了選擇器，那么寫出色彩繽紛炫酷的頁面就不成問題，選擇器按書中或者網(wǎng)絡(luò)分類有通用選擇器，標(biāo)簽選擇器，類選擇器，ID選擇器，偽類，偽元素，組合器等。那么本文會(huì)結(jié)合應(yīng)用直接介紹30個(gè)css選擇器。
成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、桑日網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為桑日等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
一、*
通配符選擇器也是通用選擇器，它可以選擇頁面上的所有元素，并對(duì)它們應(yīng)用樣式，用 * 來表示。基本會(huì)見到很多頁面上先開始就會(huì)定義通用選擇器。
- *{margin:0px;padding:0px;}
這行代碼可以刪除每個(gè)元素在瀏覽器中margin和padding的默認(rèn)值。不同的瀏覽器對(duì)元素的默認(rèn)margin和padding可能不同，用通用選擇器把所有元素的margin和padding都設(shè)置為0方便我們精確地控制元素的margin和padding。
同樣也可以將通用選擇器寫到子選擇器中，可以讓子選擇滿足通用樣式。
如上圖演示所有元素都會(huì)滿足這個(gè)樣式，如果不需要元素滿足一個(gè)樣式，盡量不要這樣用。通用選擇的兼容性是所有瀏覽器都兼容。
二、#id(#X)
id選擇器，在瀏覽器中它的優(yōu)先級(jí)是最高的，id選擇符是唯一的，不允許重復(fù)使用。
很多人會(huì)好奇為什么不能重復(fù)使用，我寫了兩個(gè)id也一樣可以?。?/strong>
這個(gè)問題可以這樣理解，css渲染id和class都不會(huì)管頁面有幾個(gè)，都是通過瀏覽器渲染，而id和標(biāo)簽都是來自于html，xhtml中已經(jīng)給了明確規(guī)范。
當(dāng)然相同的id不使用js錨鏈接等，也不會(huì)影響到頁面的顯示，但是會(huì)給以后添加js和錨鏈接帶來非常不便。
兼容性也是全部瀏覽器都可以兼容。
三、.class(.X)
類選擇器，和id選擇器不同，一樣命名的class可以重復(fù)使用多次，一般最外框用div,里面小框相同樣式就可以用class。全部瀏覽器也是兼容的。
四、html標(biāo)簽(X)
標(biāo)簽選擇器，html中的標(biāo)簽有很多比如a,img,p,h1,h2等等，這些標(biāo)簽是可以直接定義css樣式的。
- body{background:pink;}
- div{width:200px;height:300px;}
- p{color:#fff;}
五、后代選擇器(X Y)
后代選擇器又叫包含選擇器,一般寫法就是左邊的選擇器一端包括兩個(gè)或多個(gè)用空格分隔的選擇器。
- ul p{color:red}
六：偽類選擇器link/：visited/：hover/：active（下一篇文章專門寫偽類）
這四個(gè)比較常見，也與a鏈接密不可分，先拿出來說明一下，他們同屬于偽類。
:link 選擇器用于選取未被訪問的鏈接。
:visited 選擇器對(duì)指向已訪問頁面的鏈接設(shè)置樣式
:hover 選擇器用于設(shè)置鼠標(biāo)指針浮動(dòng)到鏈接上時(shí)的樣式
:active 選擇器用于設(shè)置點(diǎn)擊鏈接時(shí)的樣式。
當(dāng)然hover也可以作用于其他元素上，只有老版本的ie6不支持
- 如：div:hover{border:1px solid #ccc}
七、關(guān)系選擇器，X+Y，X>Y，X~Y
x+y是相鄰的關(guān)系后者才會(huì)生效，也可以稱作相鄰選擇器，所以如下圖中只有8顯示為紅色，其他沒有變化。
x>y是子選擇器，但對(duì)深層次的不會(huì)有作用，所以如下圖只有123為紅色，其他都沒有變色。
x~y和x+y類似都是相鄰的關(guān)系，只是x~y后面的y有多少會(huì)生效多少而，x+y只會(huì)生效一個(gè)相鄰的y。所以將ul+p改變?yōu)閡l~p中只顯示8 9 11 12響鈴的p標(biāo)簽。
八、屬性選擇器（X[title][href][data][foo])
X[title],將渲染有title的標(biāo)簽樣式，只要有title屬性在，就會(huì)有樣式，不管title內(nèi)容是什么。
X [href =“url”],將渲染指定鏈接的樣式：
X [href * =“url”]，將渲染url中包含url鏈接的樣式：
X [href ^ =“ http”]，將渲染http開頭的鏈接，也可理解為以什么開頭的鏈接，如圖所示toutiao開頭的為黃色，http開頭的為紅色。
x[href$=".png"]，將渲染以圖片png結(jié)尾的鏈接,也可理解為以什么結(jié)束的鏈接，如圖所示jpg為紅色，zip為黃色，zips則沒有生效。
x[data-*="url"]，data則可以加屬性,渲染時(shí)也會(huì)渲染規(guī)則中的url。
如所有圖片，a[data-filetype="image"] 就相當(dāng)于：
- a[href$=".jpg"],
- a[href$=".jpeg"],
- a[href$=".png"],
- a[href$=".gif"]
但是需要注意的是，要在a鏈接找那個(gè)加data-filetype的屬性，不然也是不會(huì)生效的。
x[自定義data屬性~="自定義屬性內(nèi)容"]，會(huì)匹配自定義屬性中的自定義內(nèi)容一樣的樣式。如圖所示：
- a[data-user~="toutiao"] {
- color:green;
- }
- a[data-user~="hello"] {
- border: 1px solid red;
- }
責(zé)任編輯：張燕妮
來源： 今日頭條 前端 開發(fā) 技術(shù)
網(wǎng)頁標(biāo)題：前端開發(fā)者必須記住的8個(gè)CSS選擇器
URL地址：http://www.5511xx.com/article/cdcssio.html
