nth-of-type等相對於父元素的結構偽類

阿新 • • 發佈：2018-12-13

相對於父元素的偽類

E:first-child：查詢相對於E的父元素的第一個指定型別的子元素
E:last-child：查詢相對於E的父元素的最後一個指定型別的子元素
E:first-of-type：返回該型別的第一個
E:last-of-type：返回該型別的最後一個
E:nth-child（n）：返回該型別的第n個，n從1開始索引，n小於0則不生效
- 若要取前5個E，E:nth-child(-n+5)
```
E:nth-child(-n+5){
    color:#ccc;
}
/*
n = 0;   5
n = 1;   4
...
n >= 5;  0  不生效
*/
```

程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * 
 {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 700px;
            height: 500px;
            margin: 200px auto;
            border-left: 1px solid #000;
            border-top: 1px solid #000;
        }

        ul li {
            float: left;
            list-style 
: none;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            line-height: 100px;
            text-align: center;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
        }

        /* 
        相對於父元素的結構偽類：
        E：first-child:查詢E元素的父級元素中的第一個E元素，
        1.相對於當前元素的的父級元素；
        2.查詢型別必須是指定型別，

        如果查詢到的第一個元素不是指定元素，則樣式不會生效

         */
        li:first-child {
            color: #1fe;
        }
        /* 
        E:last-child:查詢E元素的父級元素中的最後一個E元素；如果最後一個元素不是E則不生效；
         */
        li:last-child{
            background-color: #1fe;
        }
        /* 
        查詢的時候限制類型：first-of-type
        1.相對於父元素進行查詢
        2.在查詢的時候指揮查詢指定型別的元素，過濾其他型別的元素；
         */
         li:first-of-type{
             background-color: #453ea3;
         }

         /* 最後一個li元素 */
         li:last-of-type{
             color: #fff;
         }
         /* 
         E:nth-child(n):查詢E的父級元素中的第n個，不限制查詢型別，只會找到父元素的第n個子元素。
          */
         li:nth-child(5){
             background-color: red;
         }
         /* 
         E:nth-of-type(n)：查詢E的父級元素中的第n個，限制查詢型別，只會找到父元素的第n個E元素。
          */
        li:nth-of-type(5){
            color: #0f0;
        }
        /* 
        E:nth-last-of-type(n):從最後開始查詢第n個
         */
        li:nth-last-of-type(5){
            font-size: 20px;
        }
        /* 
        E:empty：查詢內容為空的E元素，
         */
        li:empty{
             background-color: black;
         }
        /* 
        1.of-type限制類型
        2.n可以是奇數（odd）和偶數（even）
         */
        li:nth-last-child(-n+9){
            color: skyblue;
        }
        li:nth-last-of-type(odd){
            background-color: pink;
        }
        li:nth-last-of-type(even){
            background-color: gold;
        }

    </style>
</head>

<body>
    <ul>
        <div></div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li></li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li></li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
    </ul>
</body>

</html>

nth-of-type等相對於父元素的結構偽類

相對於父元素的偽類 E:first-child：查詢相對於E的父元素的第一個指定型別的子元素 E:last-child：查詢相對於E的父元素的最後一個指定型別的子元素 E:first-of-

讓一個元素相對於父元素固定定位

但是 ren -c 所有展示子元素需要不能滑動 play 之前在項目中，遇到了一個場景，需要實現相對於父元素的fixed定位：在父元素內拖動滾動條時，"fixed"定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是position:

讓元素相對於父元素垂直水平居中的CSS

sla str gray posit osi 理解 idt div AD 垂直居中 position: relative; top: 50%; transform: translateY(-50%); 1、position: relative; 理解：

38.相對於父元素的fixed定位的實現

attribute sele form 所有分享 AI lac 希望固定之前在項目中，遇到了一個場景，需要實現相對於父元素的fixed定位：在父元素內拖動滾動條時，"fixed"定位的元素不能滑動，在外層拖動滾動條時，父元素及父元素內的所有元素跟著一起滑動。但是pos

css中子元素相對於父元素定位

1、參照定位的元素必須是相對定位元素的前輩元素： <div id="box1"> <div id="box2">相對參照元素進行定位</div> &l

獲取元素相對於文件的偏移量以及元素相對於父元素的偏移量

問題1：如果獲取元素距離文件頂部的距離? var rect=$('#elem')[0].getBoundingClientRect(); //獲取元素距離文件頂部的距離 var top=rect.top+(window.pageYOffset||docum

div相對於父元素垂直居中

相對父元素永遠垂直居中，水平居中也可以採用此方法。 parent{ position: absolute; top: 0; left: 0; //不會有滑動條出現，跟視窗一樣大 height:

CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法

前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n

CSS3::nth-child與:nth-of-type區別

css3選擇器 block lan strong title 選擇示例紅色 arc 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。註意：如果第N個子元素

CSS3選擇器:nth-child與:nth-of-type區別

html css css3 一、:nth-child 1.1 說明 :nth-child(n)選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。n可以是數字、關鍵詞或公式。註意：如果第N個子元素與選擇的元素類型不同則樣

nth-child,nth-last-child，only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child偽類區別和用法

type nth 只有一個 not 同時選擇器 -type span 進行我將這坨偽類分成三組，第一組：nth-child，nth-last-child，only-child第二組：nth-of-type，nth-last-of-type，第三組：first-of-tp

nth-of-type等相對於父元素的結構偽類

相對於父元素的偽類

程式碼

nth-of-type等相對於父元素的結構偽類

讓一個元素相對於父元素固定定位

讓元素相對於父元素垂直水平居中的CSS

38.相對於父元素的fixed定位的實現

css中子元素相對於父元素定位

獲取元素相對於文件的偏移量以及元素相對於父元素的偏移量

div相對於父元素垂直居中

CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法

CSS3::nth-child與:nth-of-type區別

CSS3選擇器:nth-child與:nth-of-type區別

nth-child,nth-last-child，only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child偽類區別和用法

搞清Image加載事件(onload)、加載狀態(complete)後，實現圖片的本地預覽，並自適應於父元素內

8.21 :odd??:nth-of-type??

CSS常用選擇器記錄-:nth-of-type(n)

nth-child 與 nth-of-type 選擇器的區別

CSS3選擇器:nth-child和:nth-of-type之間的差異

CSS3選擇器:nth-child和:nth-of-type的差異

選擇器 nth-child和 nth-of-type的區別

nth-child() 和 nth-of-type() 的區別

nth-child（n）與 nth-of-type（n）　區別

nth-of-type等相對於父元素的結構偽類

相對於父元素的偽類

程式碼

相關推薦