search

Home  >  Article  >  Web Front-end  >  nth-of-type在选择class的时候需要注意的一个小问题 - Canrz

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

WBOY
WBOYOriginal
2016-05-21 08:35:111495browse

查了下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>

 

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

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

此时.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>

 

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Html文档流和文档对象模型DOM理解 - 侠奕Next article：HTML 表格 做个人简历 - 唐枫

Related articles

See more