<!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. bzoj4103: [Thu Summer Camp 2015]异或运算

    对于每个询问暴力枚举x~y,然后在Trie去找第k大,开始我写了个二分答案然后算比当前答案大的个数,打了个第10个点的表就跑出19s+比bzoj垫底还慢4s+ 然而不用二分,直接1000个点一起在树上 ...

  2. sid, pid, gid

    (一) 参考 :https://unix.stackexchange.com/questions/18166/what-are-session-leaders-in-ps 命令: ps xao pid ...

  3. bzoj 1894 游戏

    题目大意: $n$个装备,每个装备有两个值,可以攻击该值对应的怪兽.每个装备最多用一次 每个怪兽被打一次之后就会死,每个怪兽可以被打当且仅当前面的都死了,求最多打多少个 思路: 很明显的二分图匹配,如 ...

  4. Watir: Watir-WebDriver对打开的浏览器attach操作

    Watir-WebDriver对于已经打开的浏览器,没有办法进行Attach操作. 但是对于自动化操作浏览器过程中点击某链接,打开的新浏览器,是能够定位到的. require 'watir-webdr ...

  5. bzoj1084 [SCOI2005]最大子矩阵——背包

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1084 水题...分类讨论一下即可. 代码如下: #include<iostream&g ...

  6. Code：zabbix 目录

    ylbtech-Code:zabbix 目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://y ...

  7. Java中的Cloneable接口与深拷贝、浅拷贝

    Cloneable接口是一个标记接口,也就是没有任何内容,定义如下: 这里分析一下这个接口的用法,clone方法是在Object种定义的,而且是protected型的,只有实现了这个接口,才可以在该类 ...

  8. Know the Core Objects of Your App---了解应用程序的内核对象

    Back to App Design You develop apps using the Cocoa application environment. Cocoa presents the app’ ...

  9. css margin边界叠加问题详谈

    问题:给子元素一个margin-top值,其父元素会跟着往下走margin-top的值 一.代码展示 HTML <body> <div class="box"&g ...

  10. python __builtins__ tuple类 （68）

    68.'tuple', 转换为元组类型 class tuple(object) | tuple() -> empty tuple | tuple(iterable) -> tuple in ...