成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS選擇器

BakerJ / 2201人閱讀

摘要：兄弟選擇器和相鄰選擇器的區(qū)別是相鄰選擇器只能選擇前置元素后相鄰的一個(gè)匹配元素，兄弟選擇器能夠選擇前置元素后同級的所有匹配元素。分組選擇器選擇所有的元素其基本結(jié)構(gòu)是選擇出用逗號(hào)分隔的所有匹配元素。

一、CSS基本選擇器

CSS基本選擇器包括了四類：標(biāo)簽選擇器、類選擇器、id選擇器、通配選擇器
針對同一個(gè)標(biāo)簽，通過這幾種方式定義的樣式的優(yōu)先級分別是：
??????通配選擇器<標(biāo)簽選擇器<類選擇器 二、組合選擇器

1、包含選擇器

/*選擇div的所有后代中的span元素*/
div span{
    font-size:12px;
}

第一個(gè)選擇符名表示：包含選擇符名稱
第二個(gè)選擇符名表示：被包含選擇符名稱

2、子選擇器

/*選擇div的所有孩子中的span元素(父子關(guān)系)*/
div>span{
    font-size:12px;
}

第一個(gè)選擇符名表示：父級選擇符名稱
第二個(gè)選擇符名表示：子級選擇符名稱

3、相鄰選擇器

/*選擇div的相鄰弟弟p元素(div之后緊接著是p元素，并且是同一級)*/
div+p{
    font-size:12px;
}

第一個(gè)選擇符名表示：“兄”選擇符名稱
第二個(gè)選擇符名表示：“弟”選擇符名稱
其結(jié)構(gòu)是第一個(gè)選擇器指定前面相鄰元素，后面的選擇器指定相鄰元素

4、兄弟選擇器

/*選擇div標(biāo)簽后面的所有同級的p元素*/
div~p{
    font-size:12px;
}

第一個(gè)選擇符名表示：“兄”選擇符名稱
第二個(gè)選擇符名表示：“弟”選擇符名稱
其基本結(jié)構(gòu)是第一個(gè)選擇器指定同級前置元素，后面的選擇器指定其后同級所有匹配元素。兄弟選擇器和相鄰選擇器的區(qū)別是：相鄰選擇器只能選擇前置元素后相鄰的一個(gè)匹配元素，兄弟選擇器能夠選擇前置元素后同級的所有匹配元素。

5、分組選擇器

/*選擇所有的div、p、h1元素*/
div,p,h1{
    font-size:12px;
}

其基本結(jié)構(gòu)是選擇出用逗號(hào)分隔的所有匹配元素。

三、屬性選擇器

1、只指定屬性名

/*形式：E[attr][attr]...:*/
.nav a[id]{
    font-size:12px;       /*選擇class為nav的元素的所有子元素中，具有id屬性的a元素*/
}

.nav a[id][title]{
    font-size:12px;       /*選擇class為nav的元素的所有子元素中，具有id屬性和title屬性的a元素*/
}

2、指定屬性名，并指定屬性值

/*形式：E[attr="value"]...:*/
.nav a[id="one"]{
    font-size:12px;       /*選擇class為nav的元素的所有子元素中，id屬性值為one的a元素*/
}

.nav a[class="nav first"][title]{
    font-size:12px;       /*選擇class為nav的元素的所有子元素中，具有title屬性，并且class屬性值為nav first的a元素*/
}

注意：屬性值必須完全匹配

3、指定屬性名，并具有該屬性值
與上面唯一的不同就是屬性值不一定要完全匹配，屬性值是一個(gè)詞列表(類似于class一樣可以有多個(gè))，只要詞列表中有一個(gè)值為value就可以。

/*形式：E[attr~="value"]...:*/
.nav a[class="nav first"][title]{
    font-size:12px;       /*選擇class為nav的元素的所有子元素中，具有title屬性，并且class屬性值為nav或first或nav first的a元素*/
}

4、指定屬性名，并屬性值是以value開頭的

/*形式：E[attr^="value"]...:*/
.nav a[title^="https://"]{
    font-size:12px;     /*選擇class為nav的元素的所有子元素中，具有title屬性，并且title屬性值以https://開頭的a元素*/
}

5、指定屬性名，并且屬性值是以value結(jié)束的

/*形式：E[attr$="value"]...:*/
.nav a[href$="png"]{
    font-size:12px;     /*選擇class為nav的元素的所有子元素中，具有href屬性，并且href屬性值以png結(jié)尾的a元素*/
}

6、指定屬性名，并且屬性值中包含了value

/*形式：E[attr*="value"]...:*/
.nav a[title*="mine"]{
    font-size:12px;     /*選擇class為nav的元素的所有子元素中，具有title屬性，并且title屬性值包含了mine的a元素*/
}

7、指定屬性名，并且屬性值是value或者以value-開頭的值

/*形式：E[attr|="value"]...:*/
.nav img[src|="img"]{
    width:200px;     /*選擇class為nav的元素的所有子元素中，具有src屬性，并且src屬性值為img或以img-開頭的a元素*/
}
四、偽類選擇器 
/*偽類選擇器的形式：E:pseudo-class*/
a:hover{
    color:"red"
}

E表示：元素
pseudo-class表示：偽類名稱

偽類選擇器的分類
1、動(dòng)態(tài)偽類
錨點(diǎn)偽類：
???:link
???:visited
行為偽類：
???:hover
???:active
???:focus

訪問一個(gè)鏈接的順序是：link-->visited-->hover-->active

2、結(jié)構(gòu)偽類

:first-child：選擇某個(gè)元素的第一個(gè)子元素
:last-child：選擇某個(gè)元素的最后一個(gè)子元素
:nth-child(n)：選擇某個(gè)元素的第n個(gè)子元素
:nth-last-child(n)：從后往前數(shù)，選擇某個(gè)元素的第n個(gè)子元素
:nth-of-type()：選擇指定的元素，e.g： div:nth-of-type("p")
:nth-last-of-type()：從后往前數(shù)，選擇指定的元素
:first-of-type()：選擇一個(gè)上級元素下的第一個(gè)同類子元素
:last-of-type()：選擇一個(gè)上級元素下的最后一個(gè)同類子元素
:only-child：選擇的元素是它的父元素的唯一一個(gè)子元素
:only-of-type：選擇一個(gè)元素是它的上級元素的唯一一個(gè)相同類型的子元素
:empty：選擇的元素里面沒有任何內(nèi)容

3、否定偽類
:not():過濾掉特定元素 e.g： input:not([type="submit"]){}

4、UI狀態(tài)偽類

:enabled：被用來指定當(dāng)元素處于可用狀態(tài)時(shí)的樣式
:disabled：被用來指定當(dāng)元素處于不可用狀態(tài)時(shí)的樣式
:read-only：被用來指定當(dāng)元素處于只讀狀態(tài)時(shí)的樣式
:read-write：被用來指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式
:cehcke：被用來指定當(dāng)表單中的radio單選框或者是checkbox復(fù)選框處于選取狀態(tài)時(shí)的樣式
:required：元素具有required屬性

5、target偽類
:target：匹配文檔(頁面)的URI中某個(gè)標(biāo)志符的目標(biāo)元素

以上為偽類，下面的是偽元素：

偽類：用于向某些選擇器添加特殊的效果
偽元素：用于向某些選擇器設(shè)置特殊效果
上面的兩個(gè)概念看了之后肯定會(huì)一臉懵逼，這不還是一樣的嗎？下面介紹下兩者的區(qū)別：
1、偽類主要是為了給某些元素添加一些特殊效果，如a標(biāo)簽的link、visited偽類等；而偽元素則是創(chuàng)建了一個(gè)虛擬容器，這個(gè)容器不包含任何DOM元素，但是可以包含內(nèi)容，并設(shè)置其樣式。
2、可以同時(shí)使用多個(gè)偽類，而只能同時(shí)使用一個(gè)偽元素

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113161.html

相關(guān)文章

  • WEB前端 CSS

    摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標(biāo)簽選擇器后跟標(biāo)簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個(gè)弟弟，找到和自己同級的標(biāo)簽如通過多個(gè)選擇器好到具體的標(biāo)簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結(jié)構(gòu) CSS選擇器 標(biāo)簽選擇...

    darry 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系。現(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識(shí)...

    forrest23 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關(guān)系?，F(xiàn)在我們回到討論開始的地方，哪類選擇器是最高效的哪個(gè)是會(huì)影響選擇器效率的關(guān)鍵選擇器寫代碼的時(shí)候，關(guān)鍵選擇器是能否高效的決定因素。 高效的CSS已經(jīng)不是一個(gè)新的話題了，也不是我一個(gè)非得重拾的話題，但它卻是我在工作之時(shí)，所感興趣的，關(guān)注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識(shí)...

    hyuan 評論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁面元素。 作為一個(gè)網(wǎng)站的前端開發(fā)工程師，應(yīng)該避免編寫一些常見的開銷很大的CS...

    Scott 評論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁面元素。 作為一個(gè)網(wǎng)站的前端開發(fā)工程師，應(yīng)該避免編寫一些常見的開銷很大的CS...

    XGBCCC 評論0 收藏0

發(fā)表評論

0條評論

BakerJ

男|高級講師

TA的文章

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