<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>子元素筛选选择器</h2>

    <h3>:first-child、:last-child、:only-child</h3>

    <div class="left first-div">

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

    </div>

    <script type="text/javascript">

        //查找class="first-div"下的第一个a元素

        //针对所有父级下的第一个

        $(".first-div a:first-child").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

        //查找class="first-div"下的最后一个a元素

        //针对所有父级下的最后一个

        //如果只有一个元素的话，last也是第一个元素

        $(".first-div a:last-child").css("color", "red");

    </script>

    <script type="text/javascript">

        //查找class="first-div"下的只有一个子元素的a元素

        $(".first-div a:only-child").css("color", "blue");

    </script>

    <h3>:nth-child、:nth-last-child</h3>

    <div class="left last-div">

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>第三个元素</a>

            <a>:last-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>第三个元素</a>

            <a>:last-child</a>

        </div>

    </div>

    <script type="text/javascript">

        //查找class="last-div"下的第二个a元素

        $(".last-div a:nth-child(2)").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

        //查找class="last-div"下的倒数第二个a元素

        $(".last-div a:nth-last-child(2)").css("color", "red");

    </script>

</body>

</html>

注意：

jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

jQuery选择器之子元素选择器的更多相关文章

  1. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  2. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. jquery选择器之子元素

    HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

  4. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

  7. css 选择器之子元素

    /*html*/ <div class="wrap"> <span>1</span> <span>2</span> &l ...

  8. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. 计算机学院大学生程序设计竞赛（2015’12）The Magic Tower

    The Magic Tower Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. 没有该栏目数据可能缓存文件(data/cache/inc_catalog_base.inc)没有更新请检查是否有写入权限

    dedecms系统搬家后或在系统还原后,重新更新栏目或文件的时候,有时会出现这样的错误提示:没有该栏目数据可能缓存文件(data/cache/inc_catalog_base.inc)没有更新请检查是 ...

  3. codeforces 459E E. Pashmak and Graph(dp+sort)

    题目链接: E. Pashmak and Graph time limit per test 1 second memory limit per test 256 megabytes input st ...

  4. JS截取与分割字符串常用技巧总结

    本文实例讲述了JS截取与分割字符串的常用方法.分享给大家供大家参考,具体如下: JS截取字符串可使用 substring()或者slice() 函数:substring() 定义:substring( ...

  5. Sorting a Three-Valued Sequence

    链接 分析:首先我们先对其进行排序,并看排序以后有多少个元素顺序是对的,接着我们看有多少个元素经过一次交换可以得到的,最后剩下的元素就是经过两次交换可以得到的了. /* PROB:sort3 ID:w ...

  6. 【ZJOI 2002】 昂贵的聘礼

    [题目链接] 点击打开链接 [算法] 最短路,注意不能用dijkstra,要用SPFA [代码] #include <algorithm> #include <bitset> ...

  7. ASP.NET Core：WebAppCoreApi

    ylbtech-ASP.NET Core:WebAppCoreApi 1.返回顶部 1. 2. 3.           4. 2. Controllers返回顶部 1.ValuesControlle ...

  8. python整数与IP地址转换 [转]

    我们有时会将一个整数与IP地址进行互换,用python代码实现很简单将一个整数如2000000,变为一个IP地址的方式 >>> import socket >>> ...

  9. Collection View Programming Guide for iOS---(四)---Using the Flow Layout

      Using the Flow Layout使用流布局 The UICollectionViewFlowLayout class is a concrete layout object that y ...

  10. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时4

    课时4 数据驱动的图像分类:K最邻与线性分类器(上) 图像分类之前,我们需要将图片转换成一张巨大的数字表单,然后从所有种类中,给这个表单选定一个标签. 为什么分类问题是个困难的问题:图像分类难点是,当 ...