国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS選擇器【記錄】

changfeng1050 / 2749人閱讀

摘要：基本選擇器組合選擇器偽類選擇器偽元素選擇器選擇器規(guī)定了規(guī)則會(huì)應(yīng)用到哪些元素上基本選擇器基本選擇器通配選擇器元素選擇器類選擇器選擇器屬性選擇器通配選擇器性能最低的一個(gè)選擇器元素選擇器類選擇器選擇器屬性選擇器屬性值為屬性值有多個(gè)，其中一個(gè)值為

?

1、基本選擇器

2、組合選擇器

3、偽類選擇器

4、偽元素選擇器

?

CSS選擇器規(guī)定了CSS規(guī)則會(huì)應(yīng)用到哪些元素上

?

1、基本選擇器

基本選擇器：通配選擇器、元素選擇器、類選擇器、ID選擇器、屬性選擇器

/* 通配選擇器、性能最低的一個(gè)CSS選擇器 */ *{}
/* 元素選擇器 */ element{}
/* 類選擇器 */ .class{}
/* ID選擇器 */ id{}
/* 屬性選擇器 */ element[attribute]{}

element[attribute="value"]{} /* 屬性值為value */
element[attribute~="value"]{} /* 屬性值有多個(gè)，其中一個(gè)值為value */
element[attribute|="value"]{} /* 屬性值為value或是以value-開頭 */

/* 屬性值以value開頭 */ element[attribute^="value"]{} /* IE7+ */
/* 屬性值以value結(jié)尾 */ element[attribute$="value"]{} /* IE7+ */
/* 屬性值包含value */ element[attribute*="value"]{} /* IE7+ */

?

2、組合選擇器

組合選擇器：后代選擇器、子選擇器、相鄰兄弟選擇器、兄弟選擇器

/* 后代選擇器 */ element element{}
/* 子選擇器 */ element > element{}
/* 相鄰兄弟選擇器 */ element + element{}
/* 兄弟選擇器 */ element ~ element{} /* IE7+ */

?

3、偽類選擇器

偽類允許基于未包含在文檔樹中的狀態(tài)信息來選擇元素

/* 未訪問 */ element:link{}
/* 已訪問 */ element:visited{} /* 出于隱私原因，可以使用此選擇器修改的樣式非常有限，允許使用的CSS屬性為color、background-color、border-color、outline-color */
/* 懸停 */ element:hover{}
/* 點(diǎn)擊 */ element:active{}
/* 輸入焦點(diǎn) */ element:focus{}

/* 基于元素語言來匹配頁面元素 */ element:lang(f){}
/* 匹配不符合參數(shù)選擇器描述的元素 */ element:not(s){} /* IE9+ */
/* 匹配文檔樹的根元素 */ element:root{} /* IE9+ */

element:first-child{}
element:last-child{} /* IE9+ */
element:only-child{} /* IE9+ */
element:nth-child(n){} /* IE9+ */
element:nth-last-child(n){} /* IE9+ */

element:first-of-type{} /* IE9+ */
element:last-of-type{} /* IE9+ */
element:only-of-type{} /* IE9+ */
element:nth-of-type(n){} /* IE9+ */
element:nth-last-of-type(n){} /* IE9+ */

/* 空元素 */ element:empty{} /* IE9+ */
/* 選中狀態(tài) */ element:checked{} /* IE9+ */
/* 可用狀態(tài) */ element:enabled{} /* IE9+ */
/* 禁用狀態(tài) */ element:disabled{} /* IE9+ */
/* 錨點(diǎn)指向的元素為目標(biāo)元素，:target偽類用于選取當(dāng)前激活的目標(biāo)元素 */ element:target{} /* IE9+ */
<style>
    #demo:target{ color:#f00; }
style>

<a href="#demo">#demoa>
<div id="demo">:target偽類使用方法div>

<a href="https://madmurphy.github.io/takefive.css/">一個(gè)基于:target偽類的更為完善的純-CSS加亮框a>

?

4、偽元素選擇器

偽元素表示所有未被包含在HTML的實(shí)體

CSS3將偽元素選擇器前面的單冒號（:）改為雙冒號（::）用以區(qū)分偽類選擇器，但以前的寫法仍然有效

/* 用于塊級元素第一行的第一個(gè)字符 */ element:first-letter{}
/* 用于塊級元素第一行的第一個(gè)字符 */ element::first-letter{} /* IE9+ */

/* 用于塊級元素第一行 */element:first-line{}
/* 用于塊級元素第一行 */element::first-line{} /* IE9+ */

element:before{}
element::before{} /* IE9+ */
element:after{}
element::after{} /* IE9+ */

element::-moz-selection{}
element::selection{} /* IE9+ */
/* 用于文檔中被用戶高亮的部分，只有一小部分CSS屬性可以用于::selection選擇器：background-color、color、text-decoration、text-shadow、outline、cursor */

element::-webkit-input-placeholder{}
element::-moz-placeholder{}
element:-ms-input-placeholder{} /* IE10+ */
element::placeholder{}

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1363.html

相關(guān)文章

  • 前端基礎(chǔ)知識(shí)學(xué)習(xí)記錄（一）

    摘要：前端基礎(chǔ)知識(shí)學(xué)習(xí)記錄一屬性通過使用屬性，可以選擇四種不同類型的定位，會(huì)影響元素框生成的方式。相對于元素的原始位置進(jìn)行定位。舉例相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且二者有相同父元素。 前端基礎(chǔ)知識(shí)學(xué)習(xí)記錄（一） 1、CSS position 屬性 通過使用 position 屬性，可以選擇四種不同類型的定位，會(huì)影響元素框生成的方式。position 屬性值的含義： static...

    liuchengxu 評論0 收藏0

  • 前端學(xué)習(xí)記錄（CSS篇）

    摘要：，層疊樣式表，將網(wǎng)頁內(nèi)容和顯示樣式分離，提高程序性能。它是一種專門描述結(jié)構(gòu)文檔的表現(xiàn)方式的文檔，主要用于網(wǎng)頁風(fēng)格設(shè)計(jì)，包括字體大小顏色以及元素的精確定位。用于控制與之間的距離。 CSS Cascading Style Sheet，層疊樣式表，將網(wǎng)頁內(nèi)容和顯示樣式分離，提高程序性能。 它是一種專門描述結(jié)構(gòu)文檔的表現(xiàn)方式的文檔，主要用于網(wǎng)頁風(fēng)格設(shè)計(jì)，包括字體大小、顏色、以及元素的精確定位。...

    skinner 評論0 收藏0

  • sass的學(xué)習(xí)記錄

    摘要：核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉(zhuǎn)換為全局變量可以添加聲明編譯為默認(rèn)變量的默認(rèn)變量僅需要在值后面加上即可。 sass簡介 SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡單和可維護(hù)。世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級CSS擴(kuò)展語言！ 兼容C...

    xuweijian 評論0 收藏0

  • CSS選擇器引起的一些思考

    摘要：隨著這個(gè)思路，我自己嘗試了一下構(gòu)造選擇器去匹配用戶的輸入，選擇器語法參考另外在的幫助下也找到了用來獲取按鍵輸入的腳本，其實(shí)想法都差不多，腳本傳送門搜到的版本。 今天在看技術(shù)博客的時(shí)候發(fā)現(xiàn)這個(gè)帖子，感覺挺有趣的，于是就去挖了一下，問題已經(jīng)是老問題，但是還是有很多值得注意和學(xué)習(xí)的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

    wudengzan 評論0 收藏0

  • CSS選擇器引起的一些思考

    摘要：隨著這個(gè)思路，我自己嘗試了一下構(gòu)造選擇器去匹配用戶的輸入，選擇器語法參考另外在的幫助下也找到了用來獲取按鍵輸入的腳本，其實(shí)想法都差不多，腳本傳送門搜到的版本。 今天在看技術(shù)博客的時(shí)候發(fā)現(xiàn)這個(gè)帖子，感覺挺有趣的，于是就去挖了一下，問題已經(jīng)是老問題，但是還是有很多值得注意和學(xué)習(xí)的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

    NervosNetwork 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<