后代和兄弟选择器选择器

最新推荐文章于 2023-08-07 20:23:04 发布
最新推荐文章于 2023-08-07 20:23:04 发布
阅读量250 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wdhxs/article/details/111935669
版权

通用兄弟选择器

通用兄弟选择器 即 ~：兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

相邻兄弟选择器

相邻兄弟选择器 即 + 当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

子选择器

子选择器 > :当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素.

后代选择器

匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

Mr.Groooooooot
关注
css后代选择器和子选择器的区别介绍
09-25
后代选择器和子选择器是CSS中的重要概念，它们用于指定样式的应用对象，但两者之间存在显著差异。后代选择器可以选取某个元素的所有后代元素，而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别，包括用法...
css组成 基本选择器，组合选择符 属性选择器 定位 重叠元素
h3331748696的博客
12-08 174
的元素先后对于最近的定位祖先元素进行定位（而不是相对于视口定位）。4.2子元素选择器（>）：与后代选择器相比，子元素选择器只能选择作为某元素直接的一级子元素的元素。3.5：分组选择器：选取所有具有相同样式定义的HTML元素，用逗号（，）来分隔每个选择器。3.2 id选择器（#id）：id选择器根据元素的id属性来选择特定的HTML元素。z-index属性指定元素的堆 顺序（哪个元素1应该放叠在其他元素的前面或后面）4.3相邻兄弟选择器(+)：可以选择紧接在另一元素后的元素，且二者有相同父元素。
前端研习录（05）——CSS后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器
清风不渡
06-21 5074
  重拾前端记忆，记录学习笔记，现在进入CSS关系选择器类型部分，CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类，以下一一说明，为方便记录，采用内部样式进行举例。  说明：后代选择器选择所有被A包含的B元素，中间用空格隔开，语法如下：  举例如下： 2、子代选择器   说明：子代选择器选择所有是A的直接子元素B，对更深的不起作用，中间用>隔开，语法如下：  举例如下： 3、相邻兄弟选择器   说明：相邻兄弟选择器选择紧跟A元素后的B元素，中间用+隔开，语法如下：  举例如下：
html4
weixin_74023667的博客
12-08 299
day03[stage01] 1章节目录 1.1目标 ·初识 CSS样式表 ·基本选择器 ·组合选择符· 属性选择器 1.2重点 ·基本选择器 · 属性选择器 ·定位 1.3难点 ·组合选择符 ·定位 2初识CSS样式表 CSS是一种描述HTML文档样式的语言。CSS描述应该如何显示HTML元素。 2.1什么是CSS · CSS指的是层叠样式表（Cascading Style Sheets），也称级联样式表 ● CSS描述了如何在屏幕、纸张或其
CSS基础-11-组合选择符（后代选择器，子元素选择器 ＞，相邻兄弟选择器 +，后续兄弟选择器 ~）
架构+开发+运维
04-25 723
1. 后代选择器 2. 子元素选择器 3. 相邻兄弟选择器 4. 后续兄弟选择器
后代、子代、兄弟选择器
weixin_52874247的博客
08-07 170
选中指定元素中符合要求的子元素（儿子元素）（先写服，再写子）符合条件的相邻兄弟元素（此处的“相邻”指：紧挨着的下一个）选择器1 选择器2 ... 选择器n {（1）后代选择器，选中的是后代，不是祖先。（1）子代选择器，选中的是子代，不是父级。（3）结构一定要符合html的嵌套要求。选择器1>选择器2>...选择器n {选中指定元素中符合要求的后代元素。（2）儿子、孙子...都属于后代。2、语法（先写祖先，再写后代）选择器1+选择器2 {选择器1~选择器2 {（1）相邻兄弟选择器。（2）通用兄弟选择器。
css后代选择器使用方法实例
09-25
总的来说，理解和熟练使用CSS后代选择器是创建高效、可维护的CSS样式表的关键步骤之一。通过正确使用后代选择器，我们可以确保样式只作用于目标元素，避免样式冲突，同时提升代码的可读性和可维护性。
css串联选择器和后代选择器使用方法
09-25
串联选择器和后代选择器是CSS中的两种重要选择器，它们允许我们更加精确地定位和样式化页面元素。 **串联选择器（Adjacent Sibling Selector）** 串联选择器，也称为相邻兄弟选择器，用于选取紧接在另一个元素后的...
jQuery后代选择器用法实例
10-25
后代选择器是jQuery中用于选择元素非常重要的选择器之一，它能够让我们方便地选取...通过这篇文章的介绍，读者可以了解到后代选择器的基本用法和应用场景，对于进一步深入学习和应用jQuery选择器提供了一个良好的基础。
css 串联选择器和后代选择器介绍及示例
09-25
串联选择器和后代选择器是CSS中两种非常基础且常用的选择器，它们帮助我们精准地定位到页面上的特定元素并对其进行样式设置。 **串联选择器（Adjacent Sibling Selector）** 串联选择器，也称为相邻兄弟选择器，...
CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）
qq_55006020的博客
06-27 3007
关系选择器
层次选择器（父子、后代、兄弟、相邻）
weixin_47124862的博客
11-30 8038
选择器 说明 M N 后代选择器，选择M元素内部后代的N元素（所有N元素） M>N 子代选择器，选择M元素内部子代的N元素（所有第1级N元素） M~N 兄弟选择器，选择M元素后所有的统计N元素 M+N 相邻选择器，选择M元素相邻的下一个N元素（M、N是同级元素） 一、后代选择器 语法：M N{} 说明：在后代选择器中，M元素与N元素用空格隔开，表示选中M元素内部后代的N元素。 举例： <!DOCTYPE html> <html lang="en"&gt...
兄弟选择器(+ 和 ~)
热门推荐
justforuse的博客
01-08 2万+
1. + 选择器　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 　　 　　比如：<style type="text/css"> h1 + p { margin-top:50px; color:red; } </style> <body> <p>This is paragraph.</p> <h1>This
兄弟选择器和相邻选择器
qq_58247332的博客
12-26 3298
1、 ~ 兄弟选择器 兄弟选择器：找到指定的元素后面的所有满足条件的兄弟元素 运行结果截图： 图1 2、 +相邻选择器 相邻选择器：选择紧接在某个元素后的元素，并且二者具有相同的父级元素 运行结果为： 图2 3、兄弟选择器和相邻选择器的注意事项 兄弟选择器 ‘~’ 只会选择后面满足...
(全面：附代码演示)css属性选择器：后代选择器、子选择器、相邻兄弟选择器、通用选择器
Xmumu_的博客
11-19 1387
大家好，这里是X，今天带来CSS选择器中4个比较容易弄混的选择器概念，下面是解释和代码示例????说句实话，有时候玩CSS选择器真的很容易混乱，所以特意写下此文，与大家共勉???????????? 文章目录方法后代选择器效果图子选择器效果图相邻兄弟选择器效果图通用选择器效果图 方法 在学习这几个选择器的路上，大家光是听名字也可以听出来，这里存在着父类、子类、兄弟的概念，所以在理解上一定要有“先后顺序”的概念，就比如下面的这段代码是我后面即将测试的用例基础码，分析一下它的层次顺序： <!DOCTYP
CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
王甲评的博客
02-07 1790
派生选择器用的很多，派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器，我们来理解一下他们之间的具体用法与区别。 1、css后代选择器 语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。 例如 html> head> style
CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器 的用法
weixin_44486539的博客
09-29 1万+
一些 CSS3 选择器 子代选择器 “>” 只选择某个元素的子元素， div>p{ color:red; } div 标签的儿子 p 标签。和 div 标签的后代 p 标签的截然不同。 能够选择： <div> <p>我是div的儿子</p> </div> 不能选择： <div> <ul> ...
css 兄弟选择器 后代选择器 并级选择器
qq_45715615的博客
03-19 786
这些选择器的优先级都为0，优先级最低。 ~ 普通兄弟选择器  匹配所有的兄弟 选择器 <第一个选择器> ~ <第二个选择器> 匹配 目标元素位于匹配第一个选择器的元素之后，且匹配第二个选择器 + 相邻兄弟选择器  匹配相邻的下一个兄弟 选择器 <第一个选择器> + <第二个选择器> 匹配 目标元素紧跟匹配第一个选择器的元素，且匹配第二个选择器 *通配符选择器 * 0 , 并集选择器 创建由逗..
选择器之相邻兄弟选择器、后代选择器、子代选择器
赵圆圆
12-20 2754
相邻兄弟选择器相邻兄弟选择器困扰我很久了，从字面上理解感觉还是很好理解，但是就是不会使用，也是查了很多资料，最后才真正的解决了，也能够比较正常的使用。下面是我整理的一些相关笔记。选择相邻兄弟 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。语法解释 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adj
html后代选择器和子类选择器
最新发布
06-20
在HTML中，后代选择器和子代选择器用于根据元素之间的关系来选择元素并应用CSS样式。 1. **后代选择器**[^1]： - 格式: `E F { css样式 }` - 功能: 它允许你选择所有在元素`E`之下的元素`F`，不论它们之间嵌套了多少层次。例如，如果你有一个`<div>`元素，你想选择所有在其内的`<p>`元素，可以这样写： ```html div p { color: blue; } ``` 2. **子代选择器**： - 格式: `E > F { css样式 }` - 功能: 这里仅选取那些直接位于元素`E`之下的元素`F`，即`E`的直接子元素。例如，如果你只想改变`<ul>`下的第一个`<li>`的样式： ```html ul > li { font-weight: bold; } ``` 这会设置所有直接在无序列表内的列表项的字体加粗，而不会影响嵌套在其他`<li>`中的文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值