• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.3 子元素伪类选择器

子元素伪类选择器,就是选择某一个元素下面的子元素的方式。选择子元素,在jQuery中是很常用的操作。jQuery为我们提供了大量选择子元素的方式,使得我们操作元素更加的方便快捷。

在jQuery中,子元素伪类选择器分为2大类。

一、第1类子元素伪类选择器

子元素伪类选择器(1)
选择器 说明
:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素,n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素(该父元素只有一个子元素)

下面我们通过几个实例,来让大家深刻地理解这些选择器。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            list-style-type:none;
        }
        li{height:20px;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("ul li:first").css("background-color", "red");
            $("ul li:nth-child(2)").css("background-color", "orange");
            $("ul li:nth-child(3)").css("background-color", "yellow");
            $("ul li:nth-child(4)").css("background-color", "green");
            $("ul li:last").css("background-color", "blue");
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在浏览器预览效果如下:

分析:

$("ul li:first")表示选择ul元素下的第1个li元素。其实$("ul li:first")也等价于$("ul li:nth-child(1)")。$("ul li:last")表示选择ul元素下的最后一个元素,在这个例子中也等价于$("ul li:nth-child(5)")。

没有接触子元素伪类选择器的同学,如果要操作某一个元素的子元素,往往都是给该子元素添加一个id或者class。但是这样会导致id或class泛滥成灾,影响HTML结构,使得代码难以维护。不过有了子元素伪类选择器,我们可以轻松地进行选择操作。

学过CSS3的小伙伴就会问了,上面的效果用CSS操作岂不是来得更简单些?废话,当然是啦。大家在后面的学习中,特别是入门阶段的实例,很多时候我们重在讲解知识概念,而不会在乎哪个方法更好。如果实例能够帮助大家理解该知识点,目的就达到了。对于知识的实践部分,我们都会在进阶教程都会介绍,大家不用担心。此外,关于CSS3的学习,大家可以关注我们的CSS3教程

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{padding:0;margin:0;}
        ul
        {
            display:inline-block;
            width:200px;
            list-style-type:none;
        }
        li{height:20px;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //设置奇数列的背景颜色
            $("ul li:nth-child(odd)").css("background-color", "red");
            //设置偶数列的背景颜色
            $("ul li:nth-child(even)").css("background-color", "red");
        })
    </script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

在浏览器预览效果如下:

分析:

$("ul li:nth-child(odd)")表示选择ul元素下奇数的li元素,$("ul li:nth-child(even)")表示选择ul元素下偶数的li元素。

二、第2类子元素伪类选择器

子元素伪类选择器(2)
选择器 说明
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)

对于这些选择器,我们一定要结合实例来理解其定义。其实,这2类子元素伪类选择器在形式上非常相似的,但是却有着本质上的区别。

第1类选择器不分元素类型,第2类选择器区分元素类型。”大家一定要记住这句话,对于你区分和理解这2类选择器极其重要。除此之外,我们仔细观察会发现,第2类选择器的命名上都有一个“type”(元素类型),这还给我们带来了一个记忆小技巧。

下面我们通过具体实例,来帮助大家真正去理解这2类子元素伪类选择器。

1、:first-child和:first-of-type

 
<div>
    <h1></h1>
    <p></p>
    <span></span>
    <span></span>
</div>

(1):first-child

h1:first-child:选择的是h1元素,因为h1元素是div的第1个子元素。

p:first-child:选择不到任何元素,因为p并不是div的第1个子元素,而是div的第2个子元素。

span:first-child:选择不到任何元素,因为span并不是div的第1个子元素,而是div的第3个子元素;

(2):first-of-type

h1: first-of-type:选择的是h1元素,因为h1元素是div中所有h1元素中的第1个h1元素,事实上也只有一个为h1的子元素。

p: first-of-type:选择的是p元素,因为p元素是div中所有p元素中的第1个p元素,事实上也只有一个为p的子元素。

span: first-of-type:选择的是id="first"的span元素,因为在div元素中有2个span元素,这里我们选择的是两个span中的第1个。

总结:

①“:first-child”是选择父元素下的第1个子元素(不区分元素类型),而“:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型);

②“:last-child”和“:last-of-type”、“nth-child(n)”和“:nth-of-type(n)”的使用原理跟“:first-child”和“:first-of-type”是一样的,大家试着想一下另外几个用在这个例子上的区别。

2、:only-child和:only-of-child

在“:only-child选择器”中,父元素是只有一个子元素的。但是在“:only-of-type选择器”中,却可以有多个子元素。“:only-of-type”相对“:only-child”来说,只是多了一个type(元素类型)的限制。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        /*去除所有元素默认外边距以及内边距*/
        *{padding:0;margin:0;}
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div p:only-child").css("background-color", "red");
        })
    </script>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
    <div>
        <p>这是一个段落</p>
        <span>这是一个span</span>
    </div>
</body>
</html>

在浏览器预览效果如下:

分析:

对于“:only-child选择器”来说,其父元素下面只能有一个子元素。在这个例子中,第1个div元素内部只有一个子元素,因此被选中。第2个div元素有2个子元素(p和span),因此没有被选中。

当我们把$("div p:only-child")改为$("div p:only-of-type")时,在浏览器预览效果如下,大家仔细琢磨一下原因。

子元素伪类选择器在实际开发中,是用得非常多的。好些新人刚刚学习,觉得很烦,经常跳跃性地学习,或者看两眼好像懂了就过了。大家在看别人的书籍的时候这样做,俺不管。但是对于绿叶这一套教程,这是一个大忌。因为对于教程内容,我都是精益求精,没用的东西我不会扯那么多,但是非常重要的知识,我会一再提醒。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部