07.31自我總結 CSS高級選擇器 一.偽類選擇器 對於之前的類選擇器的補充類再定義一個別名 舉例 常用的兩個偽類選擇器 偽類選擇器都是用:連接的 類名:nth child(N):先確定位置，再篩選選擇器 在同一結構下都是相同選擇器時使用 類名:nth of type(N):先確定選擇器，在匹配位 ...
07.31自我總結
CSS高級選擇器
一.偽類選擇器
- 對於之前的類選擇器的補充類再定義一個別名
舉例
<div class='a a-1'>123</div>
其中a為類,a-1為偽類,偽類也是一種類,他們之間用宮格隔開
我們選擇該標簽的時候可以.a.a-1,也有.a,也可以.a-1常用的兩個偽類選擇器
偽類選擇器都是用:連接的
- 類名:nth-child(N):先確定位置，再篩選選擇器
- 在同一結構下都是相同選擇器時使用
- 類名:nth-of-type(N):先確定選擇器，在匹配位置
- 在同一結構下不全是相同選擇器時使用
舉例
<div>
<!--不同結構-->
<p class="p">第1個p</p>
<h1>1</h1>
<p class="p">第2個p</p>
<p class="p">第3個p</p>
<p class="p">第4個p</p>
<p class="p">第5個p</p>
</div>
<div>
<!--同結構-->
<p class="p">第1個p</p>
<p class="p">第2個p</p>
<p class="p">第3個p</p>
<p class="p">第4個p</p>
<p class="p">第5個p</p>
</div>
樣式設置為
p:nth-child(2){
color:red
}
<!--他會先找p找到第2個,然後讓他變色成紅色,如果第二個不是p他就不起作用-->
p:nth-of-type(3){
color:red
}
<!--他會先找p然後往下找找到p計數才+1直到計數為2,他會讓他變色成紅色,如果第二個不是p他就不起作用-->二.後代(子代)選擇器
後代選擇器:
CSS語法:上一級標簽他所有的後代用宮格進行連接
子帶選擇器
CSS語法:父節點標簽後他子節的用
>進行連接註意點:連接的子代或者後代不能用他們的
標簽名
舉例說明:
<body>
<h2 id="h2">h2標簽</h2>
<div>
<h2 id="h2">div下的h2</h2>
</div>
</body>
<!--我們要body下的所有h2類標簽字體都是紅色-->
div .h2{
color:red;
}
<!--我們只要body下的h2類標簽字體都是紅色-->
div>.h2{
color:red;
}三.兄弟(相鄰)選擇器
- 兄弟選擇器:
~進行連接,他是找到前者後他會接著找後者然後會一直遍歷結束把所有的後者多找到 - 相鄰選擇器:
+進行連接,他是找到前者後,在前者後面的相鄰的才會選中,如果沒相鄰他會接著找第二個前者 - 註意
- 選擇器放置位置前與放置位置後,會有影響有點類似正則匹配先匹配到第一個然後匹配第二個
- 他所改變的是他們後者而不是兩個都改變
- 兄弟(相鄰)選擇器首先他們要是兄弟節點
四.屬性選擇器
- 屬性選擇器優先順序同類
- [屬性名]查找所有有該屬性的標簽
- [屬性名=屬性值]精確查找
- [屬性名^=值]以某某值開頭
- [屬性名$=值]以某某值結尾
- [屬性名*=值]包含某某值(模糊查詢)
五.交叉選擇器
就是把上述的選擇進行組合,包括之前講的基礎選擇器
六.群組選擇器
就是把上述的選擇器用包括之前講的基礎選擇器,隔開從而選擇多個元素
七.選擇器的優先順序
- 權值:不同級別沒有可比性、同一級別比個數、選擇器類型不影響優先順序、優先順序一致看順序
- 對於權值有些人對他級別的定義
- 標簽 10
- 類(偽類)100
- id 1000
- !important 10000
