html – nth-of-type(2)是第一个类型？

概述我有一个相对模块化的页面,但由于CMS,这些段落块中的一些内容不会填满整个块,所以我只想增加一些块的字体大小.但是,当我尝试以2和3为目标时,它似乎根本无法识别它.事实上,它只针对第一个,并且在我的检查员中,它说它因为它正在应用2的规则. 示例HTML <div class="container"> <div class="item video"> <!-- HTML fo 我有一个相对模块化的页面,但由于CMS,这些段落块中的一些内容不会填满整个块,所以我只想增加一些块的字体大小.但是,当我尝试以2和3为目标时,它似乎根本无法识别它.事实上,它只针对第一个,并且在我的检查员中,它说它因为它正在应用2的规则.

示例HTML

<div >    <div >        <!-- HTML for vIDeo stuffs-->    </div>    <div >        <h1>Example Title</h1>        <p>Example words</p>    </div>    <div >        <!-- HTML for photo stuffs-->    </div>    <div >        <!-- HTML for vIDeo stuffs-->    </div>    <div >        <h1>Example Title</h1>        <p>Example words</p>    </div>    <div >        <!-- HTML for photo stuffs-->    </div>    <div >        <!-- HTML for vIDeo stuffs-->    </div>    <div >        <h1>Example Title</h1>        <p>Example words</p>    </div>    <div >        <!-- HTML for photo stuffs-->    </div>    <div >        <!-- HTML for vIDeo stuffs-->    </div>    <div >        <h1>Example Title</h1>        <p>Example words</p>    </div>    <div >        <!-- HTML for photo stuffs-->    </div></div>

现在我的LESS文件如下所示：

.container {    .item {        &.copy {            p {                Font-size: 16px;            }            &:nth-of-type(2),&:nth-of-type(3) {                p {                    Font-size: 17px;                }            }        }    }}

从理论上讲,第一个和第四个.copy块中的段落文本应该具有16px的字体大小,而第二个和第三个块应该是17px.然而,我所看到的是,所有这些都是16px,第一个是17px,突出显示它是因为“.container .item.copy：nth-​​of-type(2)p”的规则是覆盖它.

为什么第n个类型(2)规则是针对它的第一个类型而不是第二个？为什么不是nth-of-type(3)规则没有针对它的类型的第二个块,如果它是如何计算它们的？我对这里发生的事情感到很困惑……非常感谢任何帮助.

解决方法 ：nth-​​of-type在所选给定类的类型元素中寻找(“.item.copy”).元素是div,因此CSS规则应用于HTML结构级别的div.

解决方案是使用：nth-​​child,它在HTML结构级别中寻找具有给定类(“.item.copy”)的所有元素.它可用于选择几乎每个重复的模式.那是因为你可以像这样编写它：

.item:nth-child(2n - 1) {} // This targets 1st,3rd,5th,7th,...

请注意HTML结构中的级别.当li元素中嵌套链接(总是一个链接中的链接)时会出现一个常见的错误,那么当你想要定位每一个第二个链接时,你必须这样写：

ul li:nth-child(2n) {    a {        //style the link    }}

对于使用nth-child选择器,有一个非常有用的功能：
https://css-tricks.com/examples/nth-child-tester/

总结

以上是内存溢出为你收集整理的html – nth-of-type(2)是第一个类型？全部内容，希望文章能够帮你解决html – nth-of-type(2)是第一个类型？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。