几种后代选择器的比较

最新推荐文章于 2024-07-06 11:29:49 发布

白马飒踏

最新推荐文章于 2024-07-06 11:29:49 发布

阅读量2k

点赞数 5

分类专栏： CSS设计

本文链接：https://blog.csdn.net/francis_zc/article/details/106155887

版权

本文详细介绍了CSS中四种常用的选择器：后代选择器，用于选取元素的所有后代；子元素选择器（>），则只选取直接子元素；相邻兄弟选择器（+），选择紧邻的下一个兄弟元素；后续兄弟选择器（~），选择所有后面的兄弟元素。通过实例展示了各选择器的使用方法和区别。

摘要由CSDN通过智能技术生成

一、后代选择器

选取指定元素的后代元素

与子元素选择器相比，后代选择器选取的不一定是直接后代（儿子），而是作用于所有后代元素（儿子、孙子、重孙…）都可以。

实例：（选取类为 box的元素的 id为aa后代元素）
html

<div class="box">
    <p>emmmmmmmmmm……</p>
    <p>23333333333333333……</p>
    <div>
    <p>wwwwwwwwwwww</p>
    <p id="aa">QQQQQQQQQQ</p>
    </div>    
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白马飒踏

关注关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS之后代选择器（重点，精髓！！！）

m0_53521757的博客

04-24

1137

后代选择器 后代选择器选中的是指定元素的所有后代，父子级之间用空格连接示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代选择器</title> <style type="text/css"> /* 父子级之间用空格连接, 将所有div标签下的span标签的文本颜色设置为红色*/ div span{ col

CSS教程--CSS 后代选择器

weixin_30916125的博客

10-09

336

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写： h1 em {color:red;} 上面这个规则会把作为 h1...

参与评论您还未登录，请先登录后发表或查看评论

后代选择器、子代选择器的嵌套使用及效果图

最新发布

qq_54581101的博客

07-06

759

利用id选择器的唯一特性，只选择了第一个div，并对其中的p标签进行渲染。这里必须要写“>”符号，才能只渲染father中的子标签，否则会渲染所有father以后的p标签。先使用后代选择器选择需要渲染的后代，再使用标签选择器渲染该后代拥有的所有p标签。这里先选择其中一个后代，再通过“>”选择下一个后代，对p标签进行渲染。选择了所有div中的p标签进行渲染，导致所有的p标签都被渲染为红色。下面的代码没有写“>”符号，导致渲染了所有father下的p标签。

后代选择器

Methun

03-12

1320

后代选择器：找到指定标签的所有特定的后代标签, 设置属性。1.什么是后代选择器? 作用: 找到指定标签的所有特定的后代标签, 设置属性格式: 标签名称1 标签名称2{ 属性:值; } 先找到所有名称叫做”标签名称1”的标签, 然后再在这个标签下面去查找所有名称叫做”标签名称2”的标签, 然后在设置属性 div p{}注意点: 1.后代选择器必须用空格隔开 2.后代不仅仅是儿子

简述css属性选择器的几种定义方式_CSS简介,语法,选择器分类使用,属性设置

weixin_39673051的博客

12-20

1675

1.CSS简介CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。这里要说一下 w3c标准： h...

jquery选择器简述

11-24

除了这些基础选择器，jQuery还提供了更多高级选择器，如属性选择器（`$("[attribute=value]")`）、后代选择器（`$("ancestor descendant")`）、子元素选择器（`$("parent > child")`）等，以及基于关系的选择器，如...

【16】CSS基础（2）——选择器②高级选择器

倏存的博客

01-31

1177

CSS高级选择器:后代选择器/交集选择器/并集选择器

jquery选择器的几种用法

02-09

5. 后代选择器：使用空格可以选取指定父元素的所有后代元素，不局限于直接子元素。例如，`$("div p")`会选择`div`元素下的所有`p`元素，不论它们是直接子元素还是间接子元素。 6. 相邻兄弟选择器：使用`+`符号...

css后代选择器使用方法实例

09-25

下面是一个css后代选择器的例子，大家参考使用吧

【Html】包含(后代)选择器

O(∩_∩)O

12-07

641

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如代码： .first span{color:red;} 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。请注意这个选择器与子选择器

[css选择器] 后代选择器

weixin_36210698的博客

03-10

684

后代选择器 原文链接：后代选择器 后代选择器(descendant selector) 又称为包含选择器 后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写： h1 em {color:red;} 上面这个规则...

CSS后代选择器

zhxzrd的博客

07-25

1790

CSS后代选择器样式针对div进行设置，例如将页面首部header中的内容部分inner居中则可通过后代选择器，先找容器，空格隔开，然后再添加指定元素即可。

复合选择器- 后代选择器

匆匆过客

10-12

713

后代选择器又称为包含选择器 作用：用来选择元素或元素组的**子孙后代** 其写法就是把外层标签写在前面，内层标签写在后面，中间用**空格**分隔，先写父亲爷爷，在写儿子孙子。父级子级{属性:属性值;属性:属性值;} 语法：.class h3{color:red;font-size:16px;} <img src="media/hou.png" /> 当标签发生嵌套时，内层标签就成为外层标签的后代。子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。...