常用css3選擇器

Cheng_Gang 發(fā)布于2019-08-01 17:01 / 2775人閱讀

摘要：模糊匹配屬性選擇器標(biāo)題選擇器匹配屬性值以標(biāo)題指定值開頭的每個(gè)元素。選擇器用來匹配父元素中最后一個(gè)子元素。和和是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞選擇器匹配同類型中的倒數(shù)第個(gè)同級(jí)兄弟元素。

p{
  width:40px;
  margin:8px auto;
  line-height:40px;
  border:1px solid gray;
  text-align:center;
  font-weight: 700;
}

X + Y 相鄰選擇器

X + Y : 相鄰兄弟選擇器選擇匹配Y的元素，且該元素為所匹配X元素后面相鄰的位置。

.test1+p{
  background-color:green;
  color:#fff
}

X > Y 子選擇器

X > Y:子包含選擇器選擇匹配Y的元素，且該元素為所匹配X元素的子元素。

.wrapper>p{
  background-color:#f5524b;
   color:#fff;
  border:none
}

X ~ Y 相鄰選擇器

X ~ Y: 選擇所有后面的兄弟節(jié)點(diǎn)們

.test2~p{
  background-color:#0eabdf;
   color:#fff;
  border:none
}

X[title] 屬性選擇器

a {
                display: block;
        width:300px;
                text-align: center;
                margin: 10px auto;
                color: #000;
                text-decoration: none;
            }

a[title] {
                background: green;
                color: #fff;
            }

X[title=””] 另一種屬性選擇器

a[title="標(biāo)題"] {
                background: #ff9900;
                color: #fff;
            }

屬性選擇器，上述代碼不只匹配帶有title屬性，更匹配title屬性等于”標(biāo)題”的鏈接元素。[]內(nèi)不只可用title屬性，還可以使用其他屬性。

X[title*=””] 模糊匹配屬性選擇器

    a[title*="標(biāo)題"]{
                background: #3a8aee;
                color: #fff;
            }

選擇器匹配屬性值以標(biāo)題指定值開頭的每個(gè)元素。


            item1
            item2
            item3
            item4
            item5
            item6
            item7
            item8

 ul{
    list-style: none;
}
.list li{
  line-height:24px
}

:first-child

.list li:first-child{
background-color:yellow;
}

:last-child

:last-child選擇器用來匹配父元素中最后一個(gè)子元素。

:nth-child()

nth-child(n)選擇器匹配父元素中的第n個(gè)子元素。n可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。

.list li:nth-child(2){
background-color:#09ac24;
}

Odd 和 even

Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞

.list li:nth-child(odd)
{
background:#e73a3a;
}
.list li:nth-child(even)
{
background:#f5a72c;
}

:nth-last-child(n)

:nth-last-of-type(n)選擇器匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素。n可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式

.list li:nth-last-child(6) {
background-color:#15d6af;
}

選擇前幾個(gè)元素

.list li:nth-child(-n+6) {
                background: #F05442;
                color: #fff;
            }

從第幾個(gè)開始選擇

.list li:nth-child(n+4){
background: #F05442;
color: #fff;
}

限制選擇某一個(gè)范圍

:nth-child(-n+6):nth-child(n+3){
background: #F05442;
color: #fff;
}

:nth-of-type(n)

:nth-of-type(n)選擇器匹配同類型中的第n個(gè)同級(jí)兄弟元素。

.list li:nth-of-type(3) {
  background: #635f5c;
}

:only-child

:only-child選擇器匹配屬于父元素中唯一子元素的元素。

span:only-child{
  background: #f26f0f;
}

:not

:not(selector) 選擇器匹配每個(gè)元素是不是指定的元素/選擇器。

.list li:not(:last-child){
  background: #0fcff2;
}

參考文章還需要學(xué)習(xí)的十二種CSS選擇器
參考文章 CSS選取第幾個(gè)標(biāo)簽元素：nth-child(n)、first-child、last-child

GPU云服務(wù)器云服務(wù)器 jquery常用選擇器選擇器派生選擇器省市選擇器

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Cheng_Gang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

深刻理解Spring聲明式事務(wù)

閱讀 968·2021-11-22 12:09
盤點(diǎn) 9 月份 yyds 的開源項(xiàng)目

閱讀 3732·2021-09-27 13:36
PacificRack：洛杉磯機(jī)房Windows VPS年付12美元起

閱讀 1427·2021-08-20 09:37
基于NVMe SSD的分布式文件存儲(chǔ)UFS性能提升技術(shù)解析

閱讀 4070·2019-12-27 12:22
js 實(shí)現(xiàn)上下拖動(dòng)改變父 div 的高度，左右上下拖動(dòng)動(dòng)態(tài)分割孩子的寬高

閱讀 2389·2019-08-30 15:55
停止使用px單位吧

閱讀 2389·2019-08-30 13:16
UCloud云主機(jī)安裝Cloudera

閱讀 2857·2019-08-26 17:06
如何使用 Set 來提高代碼的性能

閱讀 3461·2019-08-23 18:32

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

常用css3選擇器

相關(guān)文章