4.层次选择器

最新推荐文章于 2024-05-31 14:44:29 发布
最新推荐文章于 2024-05-31 14:44:29 发布
阅读量105 收藏
点赞数
分类专栏： CSS3 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45623678/article/details/113952163
版权

4.层次选择器

①后代选择器

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="css/style01.css">-->
<!--    <link rel="stylesheet" href="css/style02.css">-->
<!--    <link rel="stylesheet" href="css/style03.css">-->
<!--    <link rel="stylesheet" href="css/style04.css">-->
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p                                                                                                                                                                                                                                                                                                    >
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
<p>p9</p>
</body>
</html>

style01.css:

/*
    1.后代选择器
        这个元素的后面  祖爷爷 爷爷 爸爸 你
*/
body p{
    background: blue;
}

style02.css：

/*
    2.子选择器
    一代 儿子
*/
body>p{
    background: blue;
}

style03.css:

/*
    3.相邻兄弟选择器
        同辈 只有一个 相邻（向下）
*//*
    4.通用兄弟选择器
        当前选中元素的向下所有兄弟元素
*/
.active~p{
    background: #53c48b;
}
.active+p{
    background: #53c48b;
}

style04.css:

/*
    4.通用兄弟选择器
        当前选中元素的向下所有兄弟元素
*/
.active~p{
    background: #53c48b;
}

运行结果：
①
在这里插入图片描述

②
在这里插入图片描述

③
在这里插入图片描述

④
在这里插入图片描述

yu&2022
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS层次选择器[四种]
abc98526的博客
02-07 4029
1.后代选择器 后代选择器是包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版
层次选择器的4种选择器列表
wujunlei1595848的博客
06-21 7136
选择器 描述 返回 示例 $("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素 集合元素span $("div span")选取<div>里的所有的<span>元素 $("parent > child") 选取parent元素下的child（子）元素，与$(...
CSS04：层级选择器
搬运工
02-10 1748
后代选择器 在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你 举例：body 后的所有 p 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 后代选择器 */ body p { ...
[CSS]层叠样式表中的四种基础选择器的使用教程
汪海的实验室
02-13 3023
一、派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
CSS|层次选择器
Alan_Lowe
07-25 3245
CSS|层次选择器 1.分类 层次选择器分为四种类型： 后代选择器 子选择器 相邻兄弟选择器 通用选择器 我们先构建一个网页： body内放5个段落，第五个段落中放一个无序列表： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> </head> <body> <p&
jQuery--选择器（基本选择器、层次选择器）详解
吴声子夜歌的博客
10-01 2539
jQuery选择器 通过jQuery选择器可以方便快捷地获得页面中的元素，然后为其添加相应行为，无需担心浏览器的兼容性问题。jQuery选择器完全继承了CSS选择的风格，将jQuery选择器分为4类：基本选择器、层次选择器、过滤选择器和表单选择器。 基本选择器 基本选择器是jQuery中最常用的选择器，通过元素的id、className或tagName来查找页面中的元素，如下表： 选择器 ...
jQuery中的层次选择器
weixin_43350001的博客
02-26 2493
jQuery中的层次选择器 常见的层次关系包括：父子、后代、兄弟、相邻。 $(“M N”) 等价于 $(M).find(N)；表示选择后代。 $(“M>N”) 等价于 $(M).children(N)；表示选择子代。 $(“M~N”) 等价于 $(M).nextAll(N)；表示在兄弟之中选择后面所有兄弟。 $(“M+N”) 等价于 $(M).next(N)；表示在兄弟之中只选择后面那个兄弟。 HTML文件代码： <!DOCTYPE html> <html lang="en"
d3.js 选择器
热门推荐
geek word
03-08 1万+
如发现翻译不当或有其他问题可以通过以下方式联系译者:邮箱：zhang_tianxu@sina.comQQ群：D3.js:437278817，大数据可视化：436442115Github小组：VisualCrew 引用 原文 一个选择就是从当前文档中抽取的一组元素。D3使用CSS3来选择页面元素。例如，你可以使用的选择方式有标签 ("div")、类(“.awesome”
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
Jin_Xiang123的博客
01-14 2458
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
jquery层次选择器的介绍
01-21
jquery层次选择器 jquery层次选择器，包括空格、>、next、+、nextAll、~、siblings、prev()、prevAll()等函数或表达式。 1、空格表示获取所有子孙后代元素 2、 >表示获取一级子元素 3、next函数获取紧接在之后的同辈...
jQuery层次选择器用法示例
10-21
主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
jQuery层次选择器选择元素使用介绍
12-09
层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为...
JQuery中层次选择器用法实例详解
10-24
主要介绍了JQuery中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下
CSS实现一个雨滴滑落效果
云加速
05-28 1270
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css-垂直居中的几种写法
xxuxioxx的博客
05-27 361
垂直居中的几种写法
CSS 空间转换 动画
最新发布
qq_67140973的博客
05-31 289
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
lbcbjtlhmjq的博客
05-30 726
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【html知识】html中常用的表单元素+css格式美化
weixin_56334307的博客
05-30 336
本作品是一个简洁明了的HTML文档，包含了多种常用的表单元素，如输入框、密码框、单选按钮、多选按钮、下拉列表、文本域、按钮、隐藏文字以及文件上传等。每个元素都配备了相应的说明和示例，方便用户快速理解和使用。
第二十四章多栏布局解决方案（什么是自适应?/）
J3259392566的博客
05-29 564
5.middle 内容拉回来了，但 left 也跟着过来了，所以要还原，就对 left 使用相对定位 left:-200px 同理，right 也要相对定位还原right:-220px;4、这时left 拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上padding:0 220px 0 200px;4、此时main占满了，所以要把left拉到最左边，使用margin-left:-100%，同理right使用margin- left:-220px;
jQuery层次选择器
06-07
jQuery层次选择器可以用于选择指定元素在其父元素或祖先元素中的位置。以下是常用的层次选择器： 1. 子元素选择器（child selector）：使用>符号选择指定元素的直接子元素。例如，选择class为parent的元素的直接子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值