Css 后代选择器与子代选择器的区别

后代选择器用空格,比如A B{border:1px solid red;}

子代选择器用>, 比如A>B{border:1px solid red;}

但是,如果你仔细想想,这俩个概念是不是有重复的地方,

后代是不是也是子代?

子代不也是后代吗?

具体两者的关系不作讨论,我们来看看在css中具体有什么不同?

先上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代与子代选择器的区别</title>
    <!--<link rel="stylesheet" type="text/css" href="*.css"/>-->
    <script language="javascript" type="text/javascript"></script>
    <style>
        .zero>li
        {
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul class="zero" >
        <li>我是祖先</li>
       <ul>zero
           <li>我是第二代</li>
                <ul>
                    <li>
                    我是第三代
                    </li>
                </ul>
      </ul>
    </ul>
</body>
</html>

子代选择器时效果图:

后代选择器时效果图:

可以说是区别相当的大了,从效果可以看出:

后代指所有后代,而子代单指第一代

果真如此吗?

我们看看另一个例子:

我们将css代码进行修改,而html代码不变:

<style>
        .zero ul
        {
            color:red;
        }
    </style>

使用 后代选择器运行效果图:

使用子代选择器运行效果图:

什么鬼,怎么完全一样?

请注意这里的修改选项,我并不是直接用li标签,

另外我修改的是颜色属性。

事实上,上面的结论仍然是正确的

之所以出现上面的情况,我们需要考虑到继承

要知道,color这样的属性是可以继承的,也就是说

子代的字体没有默认颜色,所以它从父亲那里继承

可以,如果是这样的话,那为什么开始时没有继承呢?

答案是:border属性无法继承,像border一样无法继承

的属性还有:

display、margin、border、padding、

background、height、min-height、max-height、

width、min-width、max-width、overflow、position、

left、right、top、bottom、z-index、float、clear、

table-layout、vertical-align、page-break-after、

page-bread-before和unicode-bidi。

这其中前面4个是经过我实测的,剩下的是查的网络上

的资料,准确性无法确定。

说这些是想弄明白为什么出现了一会效果一样,

一会又效果不样的情况。

时间: 2024-11-05 13:34:20

Css 后代选择器与子代选择器的区别的相关文章

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

css 中包含(后代)选择器与子选择器的区别

子选择器:即大于号(>),用于选择指定标签元素的第一代子元素..span>li{XXXX}. 包含(后代)选择器:即加入空格,用于选择指定标签的后辈元素..fisrt span{XXXX}. 注意:这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选择器是作用于所有子后代元素.后代选择器通过空格来进行选择,而子选择器是通过">"进行选择. 总结:>作用于元素的第一代后代,空格作

CSS选择器和jQuery选择器的区别与联系

我们知道,jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用$("")包起来就成了一个jQuery选择器,如   CSS选择器 jQuery选择器 ID选择器 #myID $("myID") 类选择器 .myClass $(".myClass") 标签选择器 p $("p") 层次选择器 div > strong $(&qu

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}[h1和p之间用+隔开] ②功能不一样:后代选择器(descendant selector),又称为包含

CSS系列(8) CSS后代选择器和子选择器详解

一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> <p>这个p标签是div的后代</p> <div> 后代选择器就是用来选择一个标签的后代的: 两个选择器中间添加一个[空格]就构成了后代选择器,空格后面的那个是后代. 例如: div p { color : red; } 它会选择一堆的p标签,只要这个p标签是嵌套在某个div标签内

CSS后代选择器和子选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开] ②功能不一样:后代选择器(descendant selector),又称为包含选择器,可以选择某元素后代的元素,如上例,后代选择器是选择ul包围的所有元素中的所有li元素,包括儿子元素

小tip: CSS后代选择器可能的错误认识——张鑫旭

一.关于类选择器的一个问题 假设有下面一个面试题,CSS代码如下: .red { color: red; } .green { color: green; } HTML如下: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class

CSS样式及相关的选择器的介绍和区别

1.CSS样式作用:用于控制页面显示的方式和布局(定义html元素展示的方式),美化界面,将内容与表现分离,便于维护和扩展: 2.CSS样式的相关的选择器包括: A. html选择器:如:p{color:red;} B. ID选择器:如:#div1{font-size:14px; text-align:left;} C. 类选择器: 如: .tr{width:15%; font-weight:bold;} D. 属性选择器:属性选择器是对指定属性的html元素设置相关的样式:(该选择仅适用于IE

CSS后代选择器可能的错误认识

一.关于类选择器的一个问题 CSS代码: .red { color: red; } .green { color: green; } HTML代码: <div class="red"><div class="green"><p>1. 颜色是?</p></div></div> <div class="green"><div class="red&qu