text nth-of-type last-of-type匹配不到选择器类型选择器#css
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text nth-of-type last-of-type匹配不到选择器类型选择器#css相关的知识，希望对你有一定的参考价值。
:nth-of-type(an+b) 这个 CSS 伪类 匹配第(an+b)个和它是相同类型的兄弟节点(以及自身)的元素，其中(an+b) 为正整数值(n>=0)
兼容ie9
注意:nth-of-type是用来匹配类型，如果用来匹配类.t:last-of-type就会达不到效果。
关于CSS3选择器的可悲事实是，如果你关心页面性能，它们确实不应该被使用。使用类和ID修饰标记并纯粹匹配这些标记，
同时避免使用兄弟，后代和子选择器的所有用途实际上会使页面在所有浏览器中表现得更好。
参考：https://stackoverflow.com/questions/13554552/why-does-classlast-of-type-not-work?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
下面的例子可以匹配
~~~html
<!DOCTYPE html>
<html>
<head>
<style>
.t:nth-of-type(1)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p class="t">第一个段落。</p>
<p class="t">第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
~~~
下面的例子不能匹配
~~~html
<!DOCTYPE html>
<html>
<head>
<style>
.t:last-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p class="t">第一个段落。</p>
<p class="t">第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
</html>
~~~
以上是关于text nth-of-type last-of-type匹配不到选择器类型选择器#css的主要内容，如果未能解决你的问题，请参考以下文章
nth-of-type在选择class的时候需要注意的一个小问题
NotImplementedError: Only the following pseudo-classes are implemented: nth-of-type.
:nth-of-type() 在 jQuery / Sizzle 中？
查漏补缺——说说:nth-of-type(3n)选择器
IE8：用啥代替 nth-of-type(n)？
CSS3中:nth-child和:nth-of-type的区别深入理解