Css選擇器總結(jié)

一．常用選擇器

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比大觀網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式大觀網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋大觀地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

1. id選擇器（#myid）
2. 類選擇器（.myclassname）
3. 標(biāo)簽選擇器（p,h2,p）
4. 相鄰選擇器（h2+p）
5. 子選擇器（ul > li）
6. 后代選擇器（li a）
7. 通配符選擇器（*）
8. 屬性選擇器（a[rel="external"]）
9. 偽類選擇器（a:hover,li:nth-child）
   二．css3屬性選擇器
   E[attr]：只使用屬性名，但沒(méi)有確定任何屬性值；
   E[attr="value"]：指定屬性名，并指定了該屬性的屬性值；
   E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”不能不寫；
   E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開頭的；
   E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的；
   E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value；
   E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說(shuō)zh-cn）;
   三．UI元素狀態(tài)偽類
   ":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對(duì)于HTML中的Form元素操作，最常見(jiàn)的比如我們"type="text"有enable和disabled兩種狀態(tài)，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來(lái)看兩個(gè)實(shí)例，比如說(shuō)你想將"disabled"的文本框與別的文本框區(qū)別出來(lái)，你就可以這樣應(yīng)用 ； IE6-8不支持":checked",":enabled",":disabled"這三種選擇器
   四．:nth選擇器
   :fist-child選擇某個(gè)元素的第一個(gè)子元素；
   :last-child選擇某個(gè)元素的最后一個(gè)子元素；
   :nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；
   :nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算；
   :nth-of-type()選擇指定的元素；
   :nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開始計(jì)算；
   :first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；
   :last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素；
   :only-child選擇的元素是它的父元素的唯一一個(gè)了元素；
   :only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；
   :empty選擇的元素里面沒(méi)有任何內(nèi)容。 IE6-8和FF3-瀏覽器不支持":nth-child，:nth-last-child()，：nth-of-type"選擇器 4、否定選擇器（:not） 否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來(lái)說(shuō)明這個(gè)選擇器的用法，比如你想對(duì)form中所有input加邊框，但又不想submit也起變化，此時(shí)就可以使用:not為實(shí)現(xiàn)
   五．偽元素選擇器
   CSS中的偽元素大家以前看過(guò)：:first-line,:first-letter,:before,:after;那么在CSS3中，他對(duì)偽元素進(jìn)行了一定的調(diào)整，在以前的基礎(chǔ)上增加了一個(gè)“：”也就是現(xiàn)在變成了“::first-letter,::first-line,::before,::after”另外他還增加了一個(gè)“::selection”,兩個(gè)“：：”和一個(gè)“：”css3中主要用來(lái)區(qū)分偽類和偽元素，到目前來(lái)說(shuō)，這兩種方式都是被接受的，也就是說(shuō)不管使用哪種寫法所起的作用都是一樣的，只是一個(gè)書寫格式不同而以。 那么我們簡(jiǎn)單了解一下他們的作用 ::first-line選擇元素的第一行，比如說(shuō)改變每個(gè)段落的第一行文本的樣式，我們就可以使用這個(gè)。 ::before和::after這兩個(gè)主要用來(lái)給元素的前面或后面插入內(nèi)容，這兩個(gè)常用"content"配合使用，見(jiàn)過(guò)最多的就是清除浮動(dòng)

新聞名稱：Css選擇器總結(jié)
文章出自：http://muchs.cn/article20/ipijjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)站改版、微信小程序、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)