5-css選擇器

標籤選擇器

經過標籤的名字，修改css樣式

div{
    width: 200px;
    height: 300xp;
}

通配符選擇器

*選擇頁面中全部的元素

* {
    margin: 0;
    padding: 0;
}

一級子元素選擇器

選擇某個父元素的直接子元素

後代選擇器是選擇父元素的全部子孫元素，一級子元素原則只選擇第一級子元素，不會再向下查找元素

.box > p {
    background-color: red;
}

id選擇器

經過id查找頁面中惟一的標籤，用#表示id

#dada {
    width: 200px;
    height: 200px;
}

class選擇器

經過特定的class來查找頁面中對應的標籤

.box{
    width: 200px;
    height: 300px;
}
<div class="box"></div>

僞類選擇器

:hover鼠標移入某個元素

.box:hover {
    color: red;
}

:before在某個元素的前面插入內容

div:before {
    content: '-dadaqianduan';
    background-color: yellow;
    color: red;
}

:afer在某個元素的後面插入內容

div:after{
    content: '-dadaqianduan';
    color: red;
}

羣組選擇器

• 能夠對多個不一樣的選擇器設置相同的樣式

.box, .box1, .box2 {
    width: 200px;
    height: 300px;
}

選擇器的優先級

當有不一樣的選擇器對同一個對象進行樣式指定時，而且兩個選擇器有相同的屬性被賦予不一樣的值時。

經過測算那個選擇器的權重值最高，應用哪個選擇器的樣式

權重計算方式

• 標籤選擇器：1
• class選擇器：10
• id選擇器：100
• 行內樣式：1000
• !important最高級別，提升樣式權重，擁有最高級別

注意：

若是兩個選擇器的權重值同樣高，應用距離對象最近的css樣式