为了账号安全,请及时绑定邮箱和手机立即绑定

写的nth-child(9),但是第八个a标签变了颜色

  <div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>

</div>

<script type="text/javascript">
    //不分男女,选中第一类衣服中第9个a元素,并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $("#menu dd a:nth-child(9)").css('color','#66CD00');

</script>

https://img1.sycdn.imooc.com//5baf42170001b7fd02550138.jpg

正在回答

5 回答

看图应该可以

0 回复 有任何疑惑可以回复我~

nth-child()这个功能有点迷,比如a:nth-child(3),他会找到a所在父元素,然后再找该父元素下所有的标签(包含其他标签),定位到第3个,如果是a标签,就会生效(如果你写了p,就不会生效)。并不是找到父元素下面的第3个a标。

0 回复 有任何疑惑可以回复我~

  $("#menu dd a:nth-child(9)")指的时dd的所有子标签第九个 并且为a标签

所以要选中9的话 需要加1  因为P标签和a标签同级 所以P标签页算进去了

为$("#menu dd a:nth-child(10)")第10个元素 但是是a标签的第九个

3 回复 有任何疑惑可以回复我~

我也是这样,同问

0 回复 有任何疑惑可以回复我~

nth-child(index)  的index下标是从 0 开始的

0 回复 有任何疑惑可以回复我~
#1

做前端的Tau

别误人子弟
2018-10-12 回复 有任何疑惑可以回复我~
#2

壹贰叁肆伍 回复 做前端的Tau

这个是把兄弟元素P算进去了。a的第9个是同列的第10个!
2019-02-15 回复 有任何疑惑可以回复我~
#3

小季乐乐4412490

nth-child(index) 的index下标是从 1 开始的
2019-03-01 回复 有任何疑惑可以回复我~
#4

小季乐乐4412490

eq(index) 的index下标是从 0开始的
2019-03-01 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消

写的nth-child(9),但是第八个a标签变了颜色

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信