通用兄弟元素选择器 E ~ F

最新推荐文章于 2023-06-27 15:36:23 发布
最新推荐文章于 2023-06-27 15:36:23 发布
阅读量721 收藏
点赞数
分类专栏： js与前端

语法：

E ~ F ： {attribute}

说明：

匹配E元素之后的F元素

兼容性：

类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (√)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(√)IE7 (√)Firefox 3.0 (√)Chrome 2.0.x   (√)Safari 4Public beta
(√)IE8        
         

示例：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
div ~ p {background-color:#00FF00;}
</style>
<title>通用兄弟元素选择器 E ~ F</title>
</head>

<body>
<div style="width:733px; border: 1px solid #666; padding:5px;">
<div>
	<p>匹配E元素之后的F元素</p>
	<p>匹配E元素之后的F元素</p>
</div>
<hr />
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
<hr />
<p>匹配E元素之后的F元素</p>
<hr />
<div>匹配E元素之后的F元素</div>
<hr />
<p>匹配E元素之后的F元素</p>
</div>
</body>
</html>


judyge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css---通用兄弟元素选择器
sjpgyy的博客
06-06 995
css—通用兄弟元素选择器 用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。 使用方法： <子元素>–<之元素之后的同级兄弟元素>{ CSS样式 } <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> di
CSS通用兄弟选择器
cungui5726的博客
08-22 1203
Combinators are used to extend and enhance simple CSS selectors, making them far more powerful. I’ve introduced several combinators in previous articles: 组合器用于扩展和增强简单CSS选择器 ，使其功能更强大。 在之前的文章中，我介绍了几种组合器...
14、实例 通用兄弟元素选择器
xuxianmei的专栏
07-04 744
通用兄弟元素选择器 div~p { background-color:#0FF;} 弃我去者，昨日之日不可留 乱我心者，今日之日多烦忧 长风万里送秋雁，对此可以酣高楼 蓬莱文章建安骨，中间小谢又清发 俱怀逸兴壮思飞，欲上表天揽明月 抽刀断水水更流，举杯消愁愁更愁 人生在世不称意，明朝散发弄扁舟
通用兄弟选择器
desson
02-28 710
通用兄弟选择器 特征：用~ div~h2{ color:blue } <h2> </h2> <div> </div> <h2> </h2> <h2> </h2> <h2> </h2> 解释：选中div后面的所有兄弟h2标签 也就是说最后三个h2字体颜色是蓝色 参考 ...
通用兄弟选择器_掌握通用兄弟选择器：“自定义”选项卡导航
Web design 教程小屋
07-10 378
欢迎使用我们的系列教程中的下一部分，在本文中我们将使用通用的同级组合器~为网络创建各种组件。 本教程将介绍使用链接和无线电输入的导航元素。 除了CSS选择器， will-change属性和上一教程中的输入状态外，我们还将介绍边框破解，用于循环的Sass， calc()和可访问性！ 我们正在努力 这是我们将要构建的演示： 快速免责声明：这些CSS效果可能会在旧版浏览器中起作用，也可能...
CSS选择器.docx
07-15
2. 元素选择器 (E)：通过元素名称选取特定类型的元素，如`div`选择所有`<div>`元素。 3. ID选择器 (`#idName`)：通过ID属性选取唯一元素，ID在文档中应是唯一的。 4. 类选择器 (`.className`)：选择class属性包含...
细说CSS3中的选择符
09-27
6. 通用兄弟元素选择器： - E ~ F：匹配`E`元素后面的所有同级`F`元素。 这些新的选择符极大地扩展了CSS的功能，允许开发者实现更为复杂的布局和动态效果，比如根据元素的位置、内容或者状态来应用样式。尽管在...
css选择器.docx
10-14
- `E ~ F` - 通用兄弟选择器，选择所有在`E`之后的`F`元素。 2. **属性选择器**： - `[attr]` - 检查元素是否具有`attr`属性。 - `[attr=value]` - 检查`attr`属性值是否等于`value`。 - `[attr~=value]` - ...
CSS3属性选择符介绍
09-27
6. **通用兄弟元素选择器**： - `E ~ F`：匹配`E`元素之后的所有`F`元素，但不包括`E`的直接后续元素。 例如，`img ~ p`将选择所有在`img`元素之后的`p`元素，但不包括紧接在`img`后的`p`。 这些选择符在现代...
CSS选择器笔记（注释）.doc
09-29
7. **子元素选择器（E > F）**：使用`>`分隔，只选择E元素的直接子元素F，如`div > strong`选择div内的直接strong子元素。 ```css div > strong { color: #f00; } ``` 8. **毗邻兄弟选择器（E + F）**：选择...
兄弟元素选择器
jdbfvhxx的博客
07-28 218
后一个兄弟元素选择器 作用: 可以选中一个元素后紧挨着的指定的兄弟元素 语法: 前加一个+后一个(被选中) 前加一个~后边所有(被选中) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟元素选择器</title> <style ty...
css3之通用兄弟元素选择器
热门推荐
winson的专栏
09-21 1万+
所谓兄弟元素选择器：它是用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。 使用方式：   ~{    CSS样式  } 例如 span~p{ background: green; } 1234656 1234656
兄弟选择器
JunGuanDreams的博客
04-24 514
2，通用兄弟选择器，选中div所有的兄弟p元素且必须是往后找的兄弟，兄弟间用~号连接。1，相邻的兄弟选择器，只能找仅仅相邻且往后找的第一个兄弟，兄弟间用+号连接。
CSS3练习之通用兄弟选择器、伪元素选择器
Andone_hsx的博客
01-15 1397
点击按钮出现各图片： Demo .clear:after{ content:""; display:block; clear:both; } #dl a{ width:100px; height:20px; border:1px solid #000; back
html5通用兄第选择器,css 通用兄弟选择器( ~ )
weixin_35066076的博客
06-03 784
stylus设置兄弟元素样式：鼠标浮动在 .video-li 元素上时，.video-li 兄弟中 .video-info 下的 .word 显示。.video-li&:hover~ .video-info.wordvisibility visible设置 h1 兄弟元素中，class 为 p1 的元素样式：h1 ~ .p1 {margin-top:50px;}This is a head...
CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）
qq_55006020的博客
06-27 1588
关系选择器
相邻兄弟选择器和通用兄弟选择器
407指导员
10-21 1932
兄弟选择器 1.相邻兄弟选择器（css2） 作用 给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。（同级的标签，不能是包含关系，那样紧跟就成了父子） 格式 选择器1+选择器2 { 属性:值; } h1+p { color: skyblue; text-align: center; } <h1>相邻兄弟选择器</h1> <p>相邻兄弟选择器</p> <p>相邻兄弟选择器</p> <h1>相邻
前端研习录（05）——CSS后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器
清风不渡
06-21 4753
  重拾前端记忆，记录学习笔记，现在进入CSS关系选择器类型部分，CSS属性大致分为后代选择器、子代选择器、相邻兄弟选择器及通用兄弟选择器这四类，以下一一说明，为方便记录，采用内部样式进行举例。  说明：后代选择器选择所有被A包含的B元素，中间用空格隔开，语法如下：  举例如下： 2、子代选择器   说明：子代选择器选择所有是A的直接子元素B，对更深的不起作用，中间用>隔开，语法如下：  举例如下： 3、相邻兄弟选择器   说明：相邻兄弟选择器选择紧跟A元素后的B元素，中间用+隔开，语法如下：  举例如下：
子选择符 、相邻选择符 、 兄弟选择符 、 伪类选择符
weixin_34082854的博客
08-10 179
子选择符： E>F 选择所有作为E元素的子元素F <style> div>p{ color: red; } </style> <div> <h3>我是标题1</h3> <p>我第1个是p标签</p> <p>我第2个是p标签</p> <p&gt...
html通用兄弟选择器
最新发布
09-30
html通用兄弟选择器是指使用波浪线符号（~）来选择某个元素之后的所有相邻兄弟元素。例如，在下面的示例中，h2元素之后的所有p元素都会被选择，并且它们的颜色会被设置为fuchsia： ```html <!DOCTYPE html> 标题 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值