CSS選取器-常用搜集

標籤：str   標籤   順序   偽類   span   port   box   方法   屬性   

標籤選取器：

div{

font-size=10px;

color=red;

background-color=yello;

width=200px;

height=200px;

}

<div>前端威武</div>

---------------------------------------

類別選取器:

.box{

 

}

<p class="box">啊啊啊啊</p>

------------------------------------------

ID選取器:

#box{

 

}

<p id="box">啊啊啊<p>

-------------------------------------------

萬用字元選取器

*{

}

<div>aa</div>

<p>aaa</p>

---------------------------------

複合選取器：兩個或兩個以上的選取器通過不同方式串連起來

div.box{//無空格

color:red;

}

<div class="box">哎哎</div>//這個div裡的box變紅色 

<p class="box">aaa<p>

<div>aaaaaa</div>

-------------------------------

後代選取器：有空格    無限制隔代  

選取器+空格+選取器.....{

 

}

.box san{

cocor:red;

}

<div class="box">

<p><span class="miss">aa</span></p>

</div>

----------------------------------

子代選取器：

div>span{

color;red;

}

<div>

<p><span></span></p>//這裡的span是孫子 這裡是p>span

<span></span> //直接的子標籤變了就是這個

------------------------------------------------------------------------

並集選取器:

div,p,span{

font-size:100px;

}

<div>aaa</div>

<p>aaa</p>

<span>aaaa</span>

------------------------------------

選取器優先順序：

一、什麼是css優先順序
css優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。
二、css優先順序規則
比較簡單易記的一種方法就是給不同選取器分配不同的值：
1.id選取器預設優先順序最高，其權值為100
2.class選取器、屬性選取器和偽類別選取器的權值為10
3.標籤選取器的優先順序較低，其權值為1
所以在比較樣式的優先順序時，只需統計選擇符中的id、class、標籤名個數，然後把對應的權值相加即可。根據結果便可得出優先順序高低。
1.結果較大的優先順序較高
2.結果相同，則後定義的樣式優先順序較高
3.如果樣式值中含有!important，則該值優先順序最高 

 

CSS選取器-常用搜集