几种后代选择器的比较

最新推荐文章于 2024-08-17 10:09:50 发布

白马飒踏

最新推荐文章于 2024-08-17 10:09:50 发布

阅读量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

1138

后代选择器 后代选择器选中的是指定元素的所有后代，父子级之间用空格连接示例代码: <!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...

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

18.后代选择器,子代选择器,并集选择器,交集选择器

最新发布

Little_Green1的博客

08-17

985

这里我就写了两个选择器嘛,一个<p>标签选择器一个类选择器,然后上面那句话:选中同时满足多个条件的元素,第一个<p>标签,满足了标签选择器,还使用了class属性.属性值为box,也满足了类选择器,所以选中第一个标签,第二个<p>标签只满足标签选择器,第三个<div>标签只满足类选择器.所以只会选中第一个.有并集就有交集,两兄弟属于是.交集选择器选中同时满足多个条件的元素,选择器写法:选择器1选择器2,选择器之间连写.如果交集选择器中有标签选择器,标签选择器写最前面。

后代选择器

weixin_30315905的博客

05-18

后代选择器（重点）写法：选择器+空格+...+选择器{属性：值}特点：无限隔代. 只要能代表标签，标签、类选择器、ID选择器的自由组合。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <tit...

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

weixin_39673051的博客

12-20

1676

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

1180

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

jquery选择器的几种用法

02-09

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

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

09-25

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

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

O(∩_∩)O

12-07

642

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

[css选择器] 后代选择器

weixin_36210698的博客

03-10

687

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

CSS后代选择器

zhxzrd的博客

07-25

1792

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

复合选择器- 后代选择器

匆匆过客

10-12

714

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