CSS高級選擇器

時間 2019-11-07

標籤 css 高級選擇器欄目 CSS 简体版

原文原文鏈接

07.31自我總結

CSS高級選擇器

一.僞類選擇器

對於以前的類選擇器的補充類再定義一個別名

舉例css

<div class='a a-1'>123</div>
其中a爲類,a-1爲僞類,僞類也是一種類,他們之間用宮格隔開
咱們選擇該標籤的時候能夠.a.a-1,也有.a,也能夠.a-1

經常使用的兩個僞類選擇器html

僞類選擇器都是用:鏈接的字體

類名:nth-child(N):先肯定位置，再篩選選擇器
- 在同一結構下都是相同選擇器時使用
類名:nth-of-type(N):先肯定選擇器，在匹配位置
- 在同一結構下不全是相同選擇器時使用

舉例code

<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他就不起做用-->

二.後代(子代)選擇器

後代選擇器:htm

CSS語法:上一級標籤他全部的後代用宮格進行鏈接class
子帶選擇器import

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;
}

三.兄弟(相鄰)選擇器

兄弟選擇器:~進行鏈接,他是找到前者後他會接着找後者而後會一直遍歷結束把全部的後者多找到
相鄰選擇器:+進行鏈接,他是找到前者後,在前者後面的相鄰的纔會選中,若是沒相鄰他會接着找第二個前者
注意
- 選擇器放置位置前與放置位置後,會有影響有點相似正則匹配先匹配到第一個而後匹配第二個
- 他所改變的是他們後者而不是兩個都改變
- 兄弟(相鄰)選擇器首先他們要是兄弟節點