问答详情
源自:2-16 综合案例

为什么更多没有变颜色

<script src="jquery-3.1.1.min.js"></script>

<style type="text/css">

* {

        margin: 0;

        padding: 0;

        list-style: none;

    }

    

    body {

        font-size: 12px;

    }

    

    #menu {

        width: 360px;

        overflow: hidden;

        margin: 100px auto;

        border: 1px solid #BF9660;

    }


    #menu_con {

        width: 358px;

        height:200px;

        border-top: none

    }

    a{

        margin: 5px;

    }

</style>

</head>


<body>

<body>

<!--代码部分begin-->

<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 class="tag_More" style="display:block">

            <dl>

                <dd>

                    <p>第二类</p>

                    <a>1.背带裤</a>

                    <a>2.哈伦裤</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>11.羽绒服</a>

                    <a>12.棉服</a>

                    <a>13.夹克</a>

                    <a>14.POLO衫</a>

                    <a>更多</a>

                </dd>

            </dl>

        </div>>

    </div>

    <div id="menu_con">

        <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>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

                    <p>更多</p>

                </dd>

            </dl>

        </div>

        <div class="tag_More" style="display:block">

            <dl>

                <dd>

                    <p>第二类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a name='setColor'>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a>12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

                    <p>更多</p>

                </dd>

            </dl>

        </div>

    </div>

</div>


<script type="text/javascript">

    //找到男装下第一类衣服中的第一个p元素,并改变颜色

    //可以通过子类选择器  p:first-child 筛选出第一个p元素

    $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');

</script>


<script type="text/javascript">

    //找到男装下第一类衣服把a元素从顺序1-4加上颜色

    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素

    //注意了index是从0开始计算,所以选在1-4,为对应的index就是4

   $("#menu_con > div:first dd:eq(0) > a:lt(4)").css('color','red');

</script>


<script type="text/javascript">

    //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色

    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素

   $("#menu_con a[name='setColor']").css('color','blue');

</script>


<script type="text/javascript">

    //不分男女,选中第一类衣服中第9个a元素,并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>


<script type="text/javascript">

    //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色

    $(".tag:first a:contains('更多')").css('color','#C71585');

</script>


</body>

</html>


提问者:笑声怜人 2017-01-07 21:22

个回答

  • seashelly123
    2017-01-10 19:38:13
    已采纳

    我这可以的呀。$(".tag:first a:contains(更多)").css('color','#C71585');   女装 第一类的更多变色了~~

    1  :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素

    2  如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的.


  • seashelly123
    2017-01-10 19:41:03

    http://img.mukewang.com/5874c836000146d208270495.jpg就酱紫、

  • seashelly123
    2017-01-07 22:51:35

    把 ‘更多’的单引号去掉就可以了,具体原因参见 :contains 详细知识点~~