CSS后代选择器“空格”和“>”的使用辨析

最新推荐文章于 2024-07-06 11:29:49 发布
最新推荐文章于 2024-07-06 11:29:49 发布
阅读量1.8k 收藏 3
点赞数 5
分类专栏： HTML5+CSS|CSS3
原文链接：https://blog.csdn.net/WuLex
版权

要点：

  1. “空格”：包含子孙

  2. “>”：含子不含孙

举个栗子：

html代码如下

<body>
    <div class="parent">
        <p>1p</p>
        <div>2div
            <p>-2.1p</p>
            <p>-2.2p</p>
            <a>-2.3a</a>
        </div>
        <p>3p</p>
        <p>4p</p>
    </div>
</body>

css代码（带空格的后代选择）：

.parent p {
    background: red;
}

结果：子代1p 3p 4p 及孙代 2.1p，2.2p都选上了
在这里插入图片描述
css代码（带“>”的后代选择）：

.parent > p {
     background: red;
 }

结果：只有子代1p 3p 4p 选上
在这里插入图片描述

.NET跨平台
关注
专栏目录
CSS中的 “点“,“空格“,“＞“ ，“逗号”，“+ ”
12-30 1483
css中“>”是在子元素选择器中出现的:“>”是css3特有的选择器，表明class样式只作用于子级元素，对于子级再往下的元素则忽略不计，比如孙级的元素就会被忽略。只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。与 A B 的区别在于，A B选择所有后代元素，而A>B只选择一代。
浅谈CSS选择器中的空格
weixin_30596343的博客
03-12 273
HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关系’。基于这样的关系模型，CSS定义了后代选择器（descendant selector）也称为上下文选择器（contextual selector）。 后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如...
后代选择器、子代选择器的嵌套使用及效果图
最新发布
qq_54581101的博客
07-06 769
利用id选择器的唯一特性，只选择了第一个div，并对其中的p标签进行渲染。这里必须要写“>”符号，才能只渲染father中的子标签，否则会渲染所有father以后的p标签。先使用后代选择器选择需要渲染的后代，再使用标签选择器渲染该后代拥有的所有p标签。这里先选择其中一个后代，再通过“>”选择下一个后代，对p标签进行渲染。选择了所有div中的p标签进行渲染，导致所有的p标签都被渲染为红色。下面的代码没有写“>”符号，导致渲染了所有father下的p标签。
css子选择器(>)和后代选择器(空格)的区别
JasonAlonk的博客
12-16 979
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素 注意这里指的不是第一个 <style type="text/css"> /*添加边框样式（粗细为1px， 颜色为红色的实线）只会加在food下的li上 不会给li里面的元素加属性*/ .food>li{border:1px solid red;} </style> <h1>食物&...
css 后代选择器 > 和 空格
lixiaotao_1的博客
05-23 688
1 > 含子不含孙 2 空格 包含子孙 举个栗子： 　　html代码如下 1 <body> 2 <div class="parent"> 3 <p>1p</p> 4 <div>2div 5 <p>-2.1p</p&...
CSS选择器的使用
weixin_44961514的博客
08-21 255
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 css是前端必须要掌握的知识，其实css学起来虽然简单，但是要记的知识有很多，css的学习一共分为两大部分，一个是css的选择器，另一个是css的属性。 本文总结一下css选择器的使用方法 一、css选择器 1.标签选择器 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​ 格式: ​ 标签名称{ ​ 属性:值; ​ } ​ 注意点:...
CSS复合选择器之后代选择器
m0_61629312的博客
04-06 643
CSS复合选择器之后代选择器
css后代选择器和子选择器的区别介绍
09-25
使用后代选择器`.con p`会选择`.con`下的所有`<p>`元素，包括嵌套在`<span>`内部的`<p>`元素。相反，子选择器使用`>`符号，仅会选择直接子元素。在上述例子中，`div.con > p`只会选择`.con`直接子元素中的`<p>`标签...
css 串联选择器和后代选择器介绍及示例
12-13
串联选择器和后代选择器是CSS中两种非常基础且常用的选择器类型，它们帮助开发者精确地定位到页面上的特定元素并为其设置样式。 1. **串联选择器（Combination Selector）** 串联选择器，也称为组合选择器，它将多...
CSS的后代选择器基础使用示例
09-24
在CSS代码中，使用后代选择器将`<p>`内的`<strong>`文字大小设置为30px，而将`<strong>`内的`<i>`文字大小设置为40px。 此外，文件还提到了CSS伪类选择器的使用，如`:link`、`:visited`、`:hover`和`:active`。这些...
【温故知新】CSS学习笔记（后代和子代选择器）
12-21
【CSS学习笔记】深入理解后代和子代选择器 在CSS样式设计中，选择器是定位HTML或XML文档中特定元素的关键工具。除了基础的选择器，如类型选择器、类选择器、ID选择器和属性选择器，CSS还提供了后代选择器和子代选择...
css交集选择器和后代选择器
m0_47310515的博客
08-06 1239
交集选择器和后代选择器的区别 这里让我们先思考每个选择器的概念，有时候尽管使用不同的选择器时，他们产生的效果可能相同，但是我们应该更好的利用每个选择器的特点来简化css代码。 1.让我们来看一下交集选择器 ​ 它的语法是这样的 ​ 选择器1选择器2 { ​ ​ color：red; ​ } ​ 两个选择器紧紧挨着，中间没有空格 ​ 可以是任意的选择器组合，表示着同级别之间的关系 给所有选择器选中的标签中, 相交的那部分标签设置属性! 这里面，我使用交集选择器的效果和后代选择器的效果相同，但是我错
css选择器
m0_71380478的博客
01-15 375
css选择器
父子关系的选择器用空格与 ＞ 的区别是什么？
申小兮和林小兮的博客宝
12-27 487
父子关系的选择器用空格与 > 的区别是什么？
课时71.后代选择器（掌握）
aoai0959的博客
06-10 204
1.什么是后代选择器？ 作用：找到指定标签的所有后代标签，设置属性。 首先你要明确什么是后代？ 你的儿子，孙子，重孙子等，只要有你的血脉的，都是你的后代。 我们先来举个例子 我们想让div中的标签变红 1.用标签选择器可以做吗？ 不可以，它会选中页面上的所有p，包括div以外的 2.用id选择器可以做吗？ 可以，可以给div中的两个p设置id，然后通过id选择器给这...
Bootstrap基础：选择器
weixin_30390075的博客
02-18 109
1.CSS属性选择器 [arrt=value] 该属性有指定的确切值 [arrt~=value] 该属性值必须是多个空格隔开的值，比如，class=“title featured home”，而且这些值中的一个必须是指定的值“value” [arrt|=value] 属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”，比如lang=“z...
css选择器 - 空格，无空格和大于号＞的区别 个人笔记
树上骑个猴的博客
12-22 1809
无空格，选择的元素既有.box类，也有.p类 <style> .box.p{ font-weight:bold; color:red; } </style> <body> <div class="box"> <div class="p"> 1 </div> <div class="p2"> 2 <div class="p"> 3 <div class="box .
【轻松前端之旅】​CSS选择器中的空格与尖括号有何区别？
编程师傅的博客
10-12 543
CSS选择器中的空格与尖括号有何区别？ 例子1： .a .b {     margin: 0; } 空格隔开a和b，选择所有后代元素。 例子2： .a>.b  {      margin: 0; } 尖括号隔开a和b，选择所有子元素。 两个例子的区别就在于后代和子，后代包含子子孙孙。  【空格符】white space characters
css中后代选择器怎么使用
05-18
在CSS中，可以使用后代选择器来选择某个元素的后代元素。后代选择器使用空格来连接两个或多个选择器。例如，如果想选择所有p元素内部的strong元素，可以使用以下代码： ```css p strong { color: red; } ``` 上面的代码中，p选择器和strong选择器之间有一个空格，表示选择p元素的后代元素中的strong元素。 还可以使用多个后代选择器来选择更具体的元素。例如，如果想选择所有class为container的div元素中的所有p元素中的strong元素，可以使用以下代码： ```css .container p strong { color: red; } ``` 上面的代码中，.container选择器、p选择器和strong选择器之间都有一个空格，表示选择class为container的div元素中的后代元素中的p元素的后代元素中的strong元素。 除了空格，后代选择器还可以使用大于号（>）来选择直接子元素，使用加号（+）来选择相邻的兄弟元素，使用波浪号（~）来选择所有相邻的兄弟元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值