常用css3選擇器

Cheng_Gang 發布于2019-08-01 17:01 / 2757人閱讀

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

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: 選擇所有后面的兄弟節點們

.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="標題"] {
                background: #ff9900;
                color: #fff;
            }

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

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

    a[title*="標題"]{
                background: #3a8aee;
                color: #fff;
            }

選擇器匹配屬性值以標題指定值開頭的每個元素。


            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選擇器用來匹配父元素中最后一個子元素。

:nth-child()

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

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

Odd 和 even

Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞

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

:nth-last-child(n)

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

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

選擇前幾個元素

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

從第幾個開始選擇

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

限制選擇某一個范圍

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

:nth-of-type(n)

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

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

:only-child

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

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

:not

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

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

參考文章還需要學習的十二種CSS選擇器
參考文章 CSS選取第幾個標簽元素：nth-child(n)、first-child、last-child

云服務器 GPU云服務器 jquery常用選擇器選擇器派生選擇器省市選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50894.html

常用css3選擇器

摘要：模糊匹配屬性選擇器標題選擇器匹配屬性值以標題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標是奇數或偶數的子元素的關鍵詞選擇器匹配同類型中的倒數第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

ytwman 2019-08-29 12:48 評論0 收藏0
前端培訓-初級階段（5 - 8）

摘要：前端最基礎的就是。類同于標簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時間和終止狀態。動畫過渡可以理解為兩個關鍵幀的補間操作。往期前端培訓初級階段后記年月日更新。參考資料引用培訓目錄出處已備份到筆記速查視差滾動前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...

PAMPANG 2019-08-30 15:56 評論0 收藏0
前端培訓-初級階段（5 - 8）

摘要：前端最基礎的就是。類同于標簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時間和終止狀態。動畫過渡可以理解為兩個關鍵幀的補間操作。往期前端培訓初級階段后記年月日更新。參考資料引用培訓目錄出處已備份到筆記速查視差滾動前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...

gaosboy 2019-08-02 14:29 評論0 收藏0