nth-of-type在选择class的时候需要注意的一个小问题

Jadual Kandungan

1、.class:nth-of-type(n)在选择class的时候，如果在class前面插入x个同类型标签，n需要加上x

Rumah

hujung hadapan web

html tutorial

nth-of-type在选择class的时候需要注意的一个小问题 - Canrz

May 21, 2016 am 08:35 AM

查了下w3和MDN的手册，没发现有这个说明，写篇随笔记下。

1、.class:nth-of-type(n)在选择class的时候，如果在class前面插入x个同类型标签，n需要加上x

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<style>
    * {padding: .5em;}
    .para:nth-of-type(1) {background-color: red;}
</style>
</head>
<body>

    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>

</body>
</html>

Salin selepas log masuk

当在第1个p.para前面插入一个p时:

    <p>我是一个普通的p标签</p>
    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>

Salin selepas log masuk

此时.para:nth-of-type(2)才会是第一个p.para样式生效，jQuery选择器同理：

2、如果多个标签具有相同class，.class:nth-of-type(n)选择class的时候会全部选中所有标签的第n个class元素，jQuery只选择第一个标签的第n个class元素

    <div class="para">我是第1个div.para标签</div>
    <div class="para">我是第2个div.para标签</div>
    <div>我是一个普通的div标签</div>

    <section class="para">我是第1个section.para标签</section>
    <section class="para">我是第2个section.para标签</section>
    <section>我是一个普通的section标签</section>

    <p class="para">我是第1个p.para标签</p>
    <p class="para">我是第2个p.para标签</p>
    <p>我是一个普通的p标签</p>

Salin selepas log masuk

建议添加样式时使用tag:nth-of-type(n)或者tag.class:nth-of-type(n)筛选元素

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7281

Tutorial Java

1622

Tutorial CakePHP

1341

Tutorial Laravel

1258

Tutorial PHP

1205

Tunjukkan Lagi

Related knowledge

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?