css3的nth-child和nth-of-type

43 阅读1分钟
<style>
        /* nth-child是将父元素下的所有子元素当成同一个分组,然后匹配位置,再匹配其他的条件 */
        .text:first-child{
            color:red
        }
        p:nth-child(3){
            color:green
        }

        /* nth-of-type */
        /* 如果有设置匹配元素标签,先找到父节点下同为一个元素标签的节点,然后再匹配位置,然后再其他其他要求 */
        /* 如果一开始没有设置要匹配那种类型的节点,那么就会将父元素下的所有节点按元素标签分组,然后再匹配位置,匹配其他条件 */

        .text1:nth-of-type(1){
            color:blue
        }
        .text1:nth-of-type(2){
            color:greenyellow
        }
        .text1:nth-of-type(3){
            color:rgb(226, 40, 152)
        }
        .text1:nth-of-type(4){
            color:#7a4284
        }

        /* 循环设置子节点的样式 */

        /* 按照奇偶设置,索引从1算起 */
        /* odd匹配奇数 */
        p:nth-child(odd){
            background-color:#27dae7
        }
        /* even匹配偶数 */
        div:nth-child(even){
            background-color:#e77727
        }

        /* 按照倍数设置(an+b)a是循环的倍数,n是一个计数器(从0开始),b是偏移的数量,只有公式的索引才从0算起 */
        /* 先按照倍数找到匹配的子元素,在计算偏移 */
        /* -n+3找到的范围是[-Infinity,3],所以这个会匹配前3个元素 */
        p:nth-child(-n+3){
            padding-left:20px
        }
        /* 这个表明是选择一个范围既属于[-Infinity,3],又属于[2,Infinity]的数据 */
        p:nth-child(-n+3):nth-child(n+2){
            border:10px solid #b63636
        }

        /* 用not去掉不想要的元素 */
        /* 匹配除了属于[-Infinity,3],又属于[2,Infinity]范围外的p标签 */
        p:not(:nth-child(-n+3):nth-child(n+2)){
            border-left:15px solid #9fb636
        }
    </style>
<div class="">
    <p class="text1">p-text1</p>
    <div class="text">div-text</div>
    <p class="text1">p-text1</p>
    <div class="text1">div-text1</div>
    <p class="text">p-text</p>
    <p class="text">p-text</p>
    <div class="text1">div-text1</div>
    <div class="text1">div-text1</div>
</div>

效果图:

image.png