关于一个很简单的css的问题,小白求解

pikay 发布于 2013/10/16 12:36
阅读 411
收藏 1
div
{
	width:800px;
	height:300px;
	background:#CCC;
}
div .b:nth-of-type(3)
{
	color:red;
}


<div>
    <font class="b">1dddddddddddddd</font>
    <span class="b">2ddddddddddddd</span>
    <span class="b">3ddddddddddddd</span>
    <span class="b">4ddddddddddddd</span>
</div>


请问一下各位大大,我这里设置成第三个class b 显示文字红色,但是它是显示第四个是红色;用nth-child(n)倒是显示正常;我想要知道这是不是BUG?为什么所有浏览器测试都是第四个显红色? 

加载中
0
surgesoft
surgesoft

:nth-of-type(n)也是从1数的~

:nth-of-type(n)表示父标签下的第n个元素,

.b:nth-of-type(n)其实是。*:nth-of-type(n).b的省略,表示选取父标签下的[元素类型为*的第三个元素],且该元素的class为b。所以对于你的这个DOM结构,各个dom的描述应该是这样


<font class="b">1</font> font:nth-of-type(1).b
<span class="b">2</span> span:nth-of-type(1).b
<span class="b">3</span> span:nth-of-type(2).b
<span class="b">4</span> span:nth-of-type(3).b
所以, span:nth-of-type(3).b 可以以*:nth-of-type(3).b的选择器匹配到。所以选的是这个。

那么如果你的DOM是这个结构


<font class="b">1 bbbbbbbbbbbbbbbbbbbbbbb</font> font:nth-of-type(1).b
<span class="b">2 bbbbbbbbbbbbbbbbbbbb</span> span:nth-of-type(1).b
<span class="b">3 bbbbbbbbbbbbbbbbbbbb</span> span:nth-of-type(2).b
<span >4 bbbbbbbbbbbbbbbbbbbb</span> span:nth-of-type(3)
<span class="b">3 bbbbbbbbbbbbbbbbbbbb</span> span:nth-of-type(4).b
*:nth-of-type(3).b这个选择器同样选不到任何DOM。

不知道你理解了没有?

而nth-child选的是父元素的第n个子元素,b:nth-child(3)表示选中[父元素的第三个子元素且此元素的class是b]。如果你的第三行没有class='b',b:nth-child(3)照样什么都不会选中。

pikay
pikay
按照你说的做成功了!!
0
iSea
iSea

:nth-of-type(n) 选择器匹配属于父元素的特定类型(就是元素类型:type 要一样)的第 N 个子元素

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型(没有type)

应该是你的font  span问题导致的结果:第一个font没有第三个所以不显示(有第三个一样显示红色),span元素找到第三个显示红色,第二个从class找第三个

iSea
iSea
回复 @pikay : 对的,会先按标签分组,然后查找类选择器
pikay
pikay
就是说按标签类型分组,每个class=b的进行匹配,感谢
0
五杀联盟
五杀联盟
好复杂,没用过这种用法
0
香菇凉了
香菇凉了
刚来公司,经理就让我写页面~~~其实我对页面很不熟悉,高估我了
返回顶部
顶部