CSS入门

后代与子类选择器

此课程是收费课程,请先购买或加入会员后再访问。

这一节,我们会用到div标签?它和span这两个都叫做无意义的标签。刚听到这个概念,可能会感觉一头雾水,到底啥叫无意义呢?

不同于h标题,p段落,form表单这些标签,都是有实际对应意义的。divspan两个标签,根本就没有任何含义。但一个实际项目中,用到的最多的,刚好就是这两个无意义的标签。原因是我们需要用它们来做页面的排版布局。关于它们两个具体的区别,我们放在块级元素与行内元素这一节再详细讲解。现在大家直接把div理解成一个就行了。

后代选择器,是非常重要的概念了,而且天天都要用,所以请务必掌握了!说后代选择器之前,我们先来看一个人物关系图。

老刘家太公 -> 刘邦 -> 刘备

CSS的后代选择器

刘邦是刘太公的儿子,刘备是刘太公的第N代玄孙。那不管刘邦还是刘备,都是刘太公的后代嘛。我们用HTMl来表示,大概就是下面的这个样子了。

<html>
<head>
    <meta charset="utf-8">
    <style>

    </style>
</head>

<body>
<div class="liu">
    <span>刘邦</span>

    <div>
        <span>刘备</span>
    </div>
</div>

<hr>

<div class="xiang">
    <span>项羽</span>
</div>
</body>
</html>

后代选择器

现在需求是这样的,如果我们想让刘邦刘备两个老刘家的后人,变成红色。而老项家的不变色,这个该如何实现呢?

如果你直接在style中使用span作为选择器,这样会导致所有的span都变色的。这个就不对了,我们想改变只有老刘家的颜色而已。

<style>
    span {
        color: red;
    }
</style>

标签选择器

这里就需要用到后代选择器了。大家注意看,老刘家的div,有一个叫做liuclass。咱们将CSS修改为如下代码:

<style>
    .liu span {
        color: red;
    }
</style>

span之前,加上一个.liu,中间用一个空格分开。刷新页面,果然,只有老刘家的变色了。中间这个空格就是后代选择器的写法了。

后代选择器

浏览器就会先去找到叫做.liu的这个div,然后再到它的里面去找span。因为项羽span并不在liu里面,所以项羽是不会被选中的了。

后代选择器就是这么用了,还是很好理解的吧?

子类选择器

现在需求再变一下,我们只想让刘邦一个人变成红色,刘备也不能变。这又该如何实现呢?回顾下老刘家的血缘关系。

老刘家太公 -> 刘邦(子) -> 刘备(20代玄孙)

刘太公和刘邦是父子关系。那么问刘备和刘太公是什么关系?他是刘太公的第20代玄孙。那有没有办法,我们只找儿子辈的,而不找孙子辈的呢?这个就可以用子类选择器来实现。刚才的CSS代码,再稍微修改下:

<style>
    .liu > span {
        color: red;
    }
</style>

在中间,将之前的空格,改成>符号。刷新页面,果然,只有刘邦被选中了。这里的>号,就是子类选择器的意思。浏览器就只会找liu这个class的中叫做span的子元素。而孙子辈的刘备的这个span是不会被选中的了。

子类选择器

总结

好,后代选择器子类选择器就是这么回事了。大家只要牢记下面的规则就好了:

选择器类型 用法举例 说明
后代选择器 .liu span 不管儿子还是孙子,都是俺刘太公的后代
子类选择器 .liu > span 只管儿子,孙子俺就管不着了

现在就注册ITFun.tv会员
持续关注IT界最新技术,随时更新相关课程。在线学习IT课程或直接报名参加线下武汉PHP、Web前端培训。

仅仅30秒钟就可以简单注册

会员注册(免费)
×