子元素过滤器—：onlychild

最新推荐文章于 2021-06-04 03:52:05 发布

前端要前沿

最新推荐文章于 2021-06-04 03:52:05 发布

阅读量608

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/liangsjss2011/article/details/46619333

版权

jQuery学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

:only-child

代码理解：

$('li:only-child').css('background', '#ccc');

// 获取li元素，li是其父节点的唯一一个子元素，设置li的样式背景为灰色

===================以下为实例================

$('.indiv :only-child').css("background","maroon")

// 遍历类.indiv的所有后代元素，检查是否存在唯一子节点元素，改变其子节点的背景为棕色

$('.indiv li:only-child').css("background","maroon")

// 遍历“.indiv”类的所有后代元素，检查是否存在具有唯一子节点为li的元素，改变li的背景为棕色

$('ul:first>:only-child').css("color","blue")

// 遍历“.indiv”类的所有子元素，检查是否存在具有唯一子节点为li的元素，改变li的字体颜色为蓝色

<body>
    <div class="container">
        <ul class="clearfix">
            <li class="">zheshi yige geceshi <em>联系我们</em></li>
        </ul>
        <ul class="clearfix">
            <li class="current">首页</li>
            <li class=""><b>服务</b></li>
            <li class=""><em>联系我们</em></li>
            <li><b>link</b></li>
        </ul>
    </div>
    <div >
        <div class="indiv" style="width:1000px;background-color:blue">
            <div style="width:500px">
                <div style="width:100px">zheshi</div>
            </div>
        </div>
    </div>
</body>

前端要前沿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子元素过滤器—：onlychild

:only-child代码理解：$('li:only-child').css('background', '#ccc'); // 获取li元素，li是其父节点的唯一一个子元素，设置li的样式背景为灰色=======================================以下为实例==============================================
复制链接

扫一扫

专栏目录