nth-child和nth-of-type的区别

首页 / 正文

nth-child和nth-of-type的区别

选择器:nth-child

选择器:nth-of-type

都是找该选择器父元素的子元素；

案例

</head>   
    <style>
        .nth:nth-child(3){
            background-color: red;
        }
        .nth:nth-of-type(3){
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="nth">1</div>
    <div class="nth">2</div>
    <p class="nth">3</p>
    <p class="nth">4</p>
    <div class="nth">5</div>
    <p class="nth">6</p>
</body>

.nth:nth-child(3)

1.找到.nth元素父元素下所有的子元素，这里body是父元素；

2.找到第3个元素, 再对该元素匹配类选择器.nth, 匹配成功则添加样式；

.nth:nth-of-type(3)

1.找到.nth元素父元素下所有的子元素，这里body是父元素；

2.找到其中满足类选择器.nth的元素，并归类得到两种标签名：div，p(这就是nth-of-type中type的含义)；

3.对body下所有的元素按以上的标签名分组；

#第一组
<div class="nth">1</div>
<div class="nth">2</div>
<div class="nth">5</div>
#第二组
<p class="nth">3</p>
<p class="nth">4</p>
<p class="nth">6</p>

4.然后分别找到每组内第3个元素，分别对找到的第3个元素匹配类选择器.nth；

最新评论

https://www.studyglobus.com/author/carroll34a5552/
Ценники на вывоз мусора сейчас космос, любые лайфхаки по экономии в тему.
Richardgrold
1xbet onlayn kazino platforması ilə vaxtınızı daha səmərəli və maraqlı keçirin. Saytın canlı kazino bölməsi istifadəçilərə fərqli bir dünya təklif edir. Burada canlı dilerli kazino oyunlarının hər bir növünü sınaqdan keçirə bilərsiniz. Krupyelərin peşəkarlığı oyunun dinamikasını və marağını artırır. Müntəzəm olaraq yenilənən oyun siyahısı cansıxıcılığa yol vermir. Hesabınızı artırmaq üçün onlarla fərqli və etibarlı üsul mövcuddur. Qazanılan pullar cəmi bir neçə dəqiqə ərzində şəxsi hesabınıza köçürülür. Aktiv fəaliyyətinizə görə fərdi bonuslar və hədiyyələr qazana bilərsiniz. Dəstək xidməti həm çat, həm də e-poçt vasitəsilə kömək göstərir. 1xbet ailəsinə qoşulun və böyük uduşlar üçün ilk addımı atın. onlayn kazino
砂岩白丘
我一直梦想, 看到你们相册那样的地方。真棒。
城市地標
我喜欢, 这里分享真实经验。你的项目就是属于这里的。请继续。
宗教地標
我热爱这样的想法, 去那么多国家。真的很鼓舞。
觀景高地
能感受到热爱。继续保持感受。
最佳季節
我关注这样的资源, 写得很实在。你的网站就是属于这里的。加油。
1
1
1
1
-1' OR 2+158-158-1=0+0+0+1 or 'TKCTZnRa'='
1