CSS與SCSS的選擇器總結

選擇器能夠選擇

1. 類（或ID）、
2. 標籤、
3. 類（或ID）與標籤組合

表示方式爲： 

	類	標籤	ID
HTML	class="cla"	<lab>	id="num"
CSS	.cla	lab	#num

 

 

 

 

注意：類與ID相似，下面的例子的類也能夠換成ID

 

 

1、CSS的選擇器

一、多（類）選擇器

（1）類或標籤

選擇class=「cla1 cla2 cla3」的標籤，改變【內容3】

.cla1.cla2.cla3 {
    width: 100%;
}

<div class="cla1">
　　 內容1 
</div>

<div class="cla1 cla2">
　　 內容2 
</div>

<div class="cla1 cla2 cla3">
　　 內容3 
</div>

 

（2）標籤與類的組合

table.cla1.cla2 {
    width: 100%;
}

<table class="cla1 cla2">
　　 內容 
</table>

 

 

二、羣組選擇器

（1）類或標籤

 選擇含有cla一、cla二、cla3任一個class的標籤，改變【內容1】、【內容2】、【內容3】

.cla1, .cla2, .cla3 {
    width: 100%;
}

<div class="cla1">
　　 內容1 
</div>

<div class="cla1 cla2">
　　 內容2 
</div>

<div class="cla1 cla2 cla3">
　　 內容3 
</div>

 

（2）標籤與類的組合

table, .cla1, .cla2 {
    width: 100%;
}

<div class="cla1">
　　 內容1 
</div>

<div class="cla2">
　　 內容2 
</div>

<table>
　　 內容3 
</table>

 

 

三、相鄰選擇器

（1）類或標籤

選擇cla1後面緊接的cla2（同一父級），改變【內容2】

.cla1 + .cla2 {
    width: 100%;
}

<div class="cla0">
    <div class="cla1">
　　　　 內容1 
　　</div>
    <div class="cla2">
　　　　 內容2 
　　</div>
</div>

 

（2）標籤與類的組合

h1 + cla1 {
    width: 100%;
}

<div class="cla0">
    <h1>
　　　　 內容1 
　　</h1>
    <div class="cla1">
　　　　 內容2 
　　</div>
</div>

 

 

四、子代(類)選擇器

（1）類或標籤

選擇 cla1>cla2>cla3 這種嵌套結構的所有cla3標籤（直接後代），改變【內容1】

.cla1
>.cla2
>.cla3 {
    width: 100%;
}

<div class="cla1">
    <div class="cla2">
        <div class="cla3">
　　　　　　　 內容1 　　　　　　　<div class="cla3">
　　　　　　　　　  內容2 
            </div>
        </div>
    </div>
</div>

 

（2）標籤與類的組合

table
>.cla1
>td {
    width: 100%
}

<table>
    <div class="cla1">
        <td>
　　　　　　 內容 
　　　　　</td>
    </div>
</table>

 

 

五、後代(類)選擇器

（1）類或標籤

 選擇 cla1後代裏面的所有cla3標籤 （無論後代嵌套得有多深），改變【內容1】、【內容2】

.cla1 .cla3 {
    width: 100%;
}

<div class="cla1">
    <div class="cla2">
        <div class="cla3">
　　　　　　　 內容1 
            <div class="cla3">
　　　　　　　　　  內容2 
            </div>
        </div>
    </div>
</div>

 

（2）標籤與類的組合

.cla1 h1 {
    width: 100%;
}

<div class="cla1">
    <td>
        <h1>
　　　　　　 內容 
　　　　　</h1>
    </td>
</div>

 

 

六、僞類選擇器

僞類必須配合正常的類來使用，改變未訪問的連接【內容】

a:link {
    color: #fff
}

<a>
　　 內容 
</a>

 

 

 

 

2、SCSS的選擇器

一、多（類）選擇器 

.cla1 {
    &.cla2.cla3 {
        width: 100%;
    }
}

.cla1.cla2.cla3 {
    width: 100%;
}

 

 

二、羣組選擇器

 

.cla1 {
    &, .cla2, .cla3 {
        width: 100%;
    }
}

.cla1, .cla2, .cla3 {
    width: 100%;
}

 

 

三、相鄰選擇器

.cla1 {
    & + .cla2 {
        width: 100%;
    }
}

.cla1 + .cla2 {
    width: 100%;
}

 

 

四、子代（類）選擇器

.cla1 {
    >.cla2>.cla3 {
        width: 100%;
    }
}

//或者是從子類寫到父類（根據本身實際須要）
.cla2 {
    .cla1>&>.cla3 {
        width: 100%;
    }
}

.cla1>.cla2>.cla3 {
    width: 100%;
}

 

 

五、後代（類）選擇器

.cla1 { .cla3 {
        width: 100%;
    }
}

//或者是從子類寫到父類（根據本身實際須要）
.cla3 {
    .cla1 & {
        width: 100%;
    }
}

.cla1 .cla3 {
    width: 100%;
}

 

 

六、僞類選擇器

a {
    &:link {
        color: #ffffff;
    }
}

a:link {
    color: #ffffff;
}

 

 

七、自定義類（BEM）的選擇

//之前的用法
.cla {
    @at-root #{&}1 {
        width: 100%;
    }
    @at-root #{&}2 {
        width: 100%;
    }
}

//新支持的用法（後面最好不要跟【標籤】或【屬性】名）
.cla {
    &1 {
        width: 100%;
    }
    &2 {
        width: 100%;
    }
}

.cla1 {
    width: 100%;
}

.cla2 {
    width: 100%;
}

 

 

八、屬性的選擇

.cla1 {
    border: {
        width: 1px;
        style: soild;
        color: #ffffff;
    }
}

.cla1 {
    border-width: 1px;
    border-style: soild;
    border-color: #ffffff;
}