轉載:css選擇器總結
轉載:https://www.cnblogs.com/z937741304/p/7901086.html 作者:暱稱:一步一步向上爬
一、選擇器
1、* 萬用字元選擇器
這個選擇器是匹配頁面中所有的元素,一般用來清除瀏覽器的預設樣式.
1 |
*{ margin : 0 ; padding : 0 }
|
2、元素選擇器
通過標籤名來選擇元素。
1 |
div{ width : 100px ; height : 100px ;}
|
3、class選擇器
class選擇器 / 類選擇器 / 用class屬性給元素命名,在頁面中可以出現很多次,相當於人的名字。
1 |
.box{ width : 100px ; height : 100px ;}
<div class= "box" ></div>
<p class= "box" ></p>
|
4、 id選擇器
以id屬性來命名,在頁面中只能出現一次,具有唯一性,並且權重值最高,相當於一個人的身份證。
1 2 3 |
#box{ width : 100px ; height : 100px ;}
<div id= "box" ></div>
|
二、高階選擇器 一
1、 E F 後代選擇器
匹配到E元素下面的所有的F元素(包括子、孫),空格隔開。
1 2 3 4 5 6 7 8 |
div ul li { width : 100px ; height : 100px ;}<br>//匹配到div下面的所有ul,且ul的所有後代li
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
|
2、 E,F 多元素選擇器
同時匹配到E元素和F元素,用逗號隔開。
1 2 3 4 |
div,#box{ width : 100px ; height : 100px ; background : #000 ;}//同時匹配到下文中的div標籤和id為box的p標籤
<div></div>
<p id= "box" ></p>
|
3、E>F 子元素選擇器
選擇到E元素的直接子代F,只選擇子代。
1 |
ul>li{ width : 100px ; height : 100px ;}<br><br><ul><br> <li><br> </li><br></ul>
|
4、E+F(毗鄰選擇器) 相鄰兄弟選擇器
緊接在E元素後面的同級元素F,相鄰兄弟選擇器,有相同的父級。
1 2 3 4 5 6 7 8 |
div+.box{ width : 100px ; height : 100px ; background :pink;}//這個只能選擇到下面第二行的那個p元素 最後一個不滿足緊接在div元素後面這個條件
<div></div>
<p class= "box" ></p>
<p class= "box" ></p>
<div></div>
<p></p>
<p class= "box" ></p>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
div p + p{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;
}
//這個可以選擇到下面除了第一個p元素外其他所有的元素。
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
|
三、高階選擇器 二 屬性選擇器
1、 E[attr] 匹配具有attr屬性的E元素
1 2 3 4 5 6 7 8 9 |
div[title]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;
} //匹配到下文中的第一個和第三個div元素 因為他們含有title屬性
<div title= "width" ></div>
<div></div>
<div title= "height" ></div>
|
2、E[attr=val]
匹配具有attr屬性且值只為val的的E元素(注意 屬性值要用引號引起來,我自己試了試好像不用括號也可以。)
1 2 3 4 5 6 7 8 |
div[title= "height" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;<br>} //匹配到下文中的第三個div元素
<div title= "width" ></div>
<div></div>
<div title= "height" ></div>
|
3、E[attr~=val]
匹配屬性值為attr,幷包含這個值的E元素,用於選取屬性值中包含指定詞彙的元素。
1 2 3 4 5 6 7 8 9 10 |
div[class~= "c1" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;
} //選擇到下方第一個和第二個div元素
<div class= "c1" ></div>
<div class= "c1 c2" ></div>
<div class= "c2c1" ></div>
|
4、E[attr|=val]
匹配所有屬性為attr,值為val或者以 var- 開頭的E元素
1 2 3 4 5 6 7 8 9 10 |
div[class|= "c1" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;
}//選擇到下面當中的第一個和第三個元素
<div class= "c1" ></div>
<div class= "c1cs" ></div>
<div class= "c1-c2" ></div>
|
5、E[attr][attr2=val]匹配所有 有attr1屬性 且有attr2屬性,且attr2的值為val的E元素,這個就是寫出幾個屬性選擇器,並且都要同時滿足他們的條件。
1 2 3 4 5 6 7 8 9 |
div[title= "width" ][class]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background :pink;
} //選擇到下面的第一個div元素
<div title= "width" class= "box" ></div>
<div title= "width" ></div>
|
四、a偽類選擇器
1 2 3 4 5 6 7 8 |
1 、 :link 匹配所有未被點選的連結
a:link{ color : green ; }
2 、:hover 匹配滑鼠懸停在其上的元素
a:hover{ color : gold; }
3 、:active 匹配滑鼠按下還沒有釋放的元素
a:active{ color : blue ; }
4 、:visited 匹配所有已經被點選的連結
a:visited{ color : red ; }
|
hover的使用,只是一個選擇器,一定是他的後代。
1 2 3 4 5 6 7 8 9 10 11 12 |
.box{
width : 100px ;
height : 100px ;
color : #fff ;
background : #000 ;
}<br>.box:hover p{
color : red ;
}//滑鼠移動div上,p字型的顏色改變
<div class= "box" >
<p>我的字型</p>
</div>
|
2. a偽元素選擇器
1> :before 在元素
1 2 3 4 |
div:before{
content : "before插入的元素" ;
}
//在div所有元素的最前面插入這個
|
<div>
<p>這個是p</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
2> :after 在元素後面插入內容,插到最後一個子元素的後面。
1 2 3 |
div:after{ content : "" ;}
<div></div>
|
css3新增的選擇器
五. 關聯選擇器
E1~E2(選擇E1後面的兄弟E2)
1 2 3 4 5 6 7 8 9 10 11 |
div~p{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background : #000 ;
}
//div後面的三個p元素都選擇到了
<div></div>
<p></p>
<p></p>
<p></p>
|
六、 屬性選擇器新增
1. [attr^=" .."] 以....開頭的元素
1 2 3 4 5 6 7 8 9 10 |
div[class^= "de" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background : #000 ;
} //選擇到了前面三個div元素
<div class= "de1" ></div>
<div class= "de" ></div>
<div class= "dedkjsfkld" ></div>
<div class= "1fde" ></div>
|
2. [attr$="... "] 以...結束的元素
1 2 3 4 5 6 7 8 9 10 11 |
div[class$= "de" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background : #000 ;
}
//選擇到了前三個
<div class= "de1de" ></div>
<div class= "de" ></div>
<div class= "dedkjsfklde" ></div>
<div class= "1f" ></div>
|
3. [attr*=""] 選擇到包含值的元素
1 2 3 4 5 6 7 8 9 10 11 |
div[class*= "de" ]{
width : 100px ;
height : 100px ;
margin-top : 2px ;
background : #000 ;
}
//選擇到下面的 1 2 4 都包含de字母
<div class= "de1de" ></div>
<div class= "de" ></div>
<div class= "dld" ></div>
<div class= "1def" ></div>
|
七、偽類新增的選擇器 下面都用p來舉例子,其他的也一樣
下面當中就舉一個例子,其他的那些自己去實驗一下,可以用這個例子來實驗
這裡是有of的是從p元素當中選p
1. :first-of-type
1 2 3 4 5 6 7 8 9 10 11 12 13 |
p:first-of-type{
width : 100px ;
height : 100px ;
background : #000
|