课时71.后代选择器(掌握)

1.什么是后代选择器?

作用:找到指定标签的所有后代标签,设置属性。

首先你要明确什么是后代?

你的儿子,孙子,重孙子等,只要有你的血脉的,都是你的后代。

我们先来举个例子

我们想让div中的标签变红

1.用标签选择器可以做吗?

不可以,它会选中页面上的所有p,包括div以外的

2.用id选择器可以做吗?

可以,可以给div中的两个p设置id,然后通过id选择器给这两个p设置颜色

3.用class选择器可以做吗?

可以,分别给它们设置class,然后设置颜色

但是无论是用id,class选择器都有一个弊端,就是如果一个界面,div中有成千上万个p怎么办?难道你要一个个的去设置?这样工作量就比较大了,所以要用到一个后代选择器。

格式:

标签名称1 标签名称2{
         属性:值;

}

先找到标签名称叫做标签名称1的标签,然后再在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性

div p{}

注意点:

1.后代选择器必须用空格隔开

2.后代不仅仅是儿子,也包括孙子/重孙子,只要最终是放到指定标签中的都是后代

3.后代选择器不仅仅可以使用标签名称,还可以使用其它选择器

1.将id名称与标签名称结合使用

   

2.将类名称与标签名称结合使用

   

3.将id名称与id名称结合使用

    

4.将id名称与类名称结合使用

  

我们在这里需要补充一点:后代选择器可以无限的往下延伸

  

有一个空格代表是一个后代

div  ul代表先找到div,从div中找到所有名字叫做ul的后代,只有一个名字叫做ul的,然后再来个空格,代表着从ul中去找到名称叫做li的后代,那我们这里有几个li的后代呢?我们可以找到两个,后面又有了空格,代表着从li里面去找p的后代,先找到li里面叫做p的后代,找到了,就设置颜色,而第二个里面没有名字叫做p的后代,就没有找到,没有找到就什么都不做,而如果第二段li中也有p,那么就会有两个p变颜色。

原文地址:https://www.cnblogs.com/luckyshuangshuang/p/9164321.html

时间: 2024-10-07 01:54:42

课时71.后代选择器(掌握)的相关文章

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

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

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

子选择器 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素.如右侧代码编辑器中的代码: .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li(水果.蔬菜)加入红色实线边框. <style type="text/css"> .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ </style

CSS3后代选择器和同级选择器简介和实例

CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器(或称组合选择器), 分为后代选择器(Descendant combinator/Child combinators)和同级选择器(Sibling combinators): 其中后代选择器分以下3个: 1. 空格.div p: 表示p是div的后代元素, div是p的祖先.该选择器选择所有div下的p后代元素. 2. 箭头(>).表示直系关系.div > p 表示div的儿子辈的元素. 3. 星号(*).表

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

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

后代选择器&amp;选择器优先级尝试

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>后代选择器</title> 6 <style type="text/css"> 7 .first span{ 8 color:red;

CSS后代选择器和子选择器

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

后代选择器的写法

把外层的标签写在前面,内层的标签写在后面,之间用空格分隔 <html> <head> <title>后代选择器</title> <style type="text/css"> h3 strong{ color:blue; font-size:36px; } </style> </head> <body> <h3>恰似一江<strong>春水</strong>

小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之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器 那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器