HTML兄弟选择器分为哪两种,CSS选择器之兄弟选择器（~和+）

最新推荐文章于 2024-08-09 11:41:07 发布

weixin_39534100

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量1.8k

点赞数

文章标签： HTML兄弟选择器分为哪两种

本文介绍了在CSS中，兄弟选择器'+'和'~'的区别。'+'选择器用于选取紧跟其后的兄弟元素，而'~'选择器则选取所有后续的同级元素。通过实例展示了它们在实际应用中的不同效果。

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

今天在改以以前人家写的网页的样式的时候，碰到这个选择器，‘~’，当时我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。

后来网上查了下，也许是我查找的方式不对，没有找到我想要的答案，于是私下拿这两个选择器来测试了一下。发现原来是这样的。

先来代码说话：

(1)、‘~’选择器

Document

.h3 ~ p{

color: red;

}

这是段落标签

这是标题标签

这是段落标签

这是标题标签

这是段落标签

效果如下：

(2)、‘+’选择器

Document

.h3 + p{

color: red;

}

这是段落标签

这是标题标签

这是段落标签

这是标题标签

这是段落标签

这是段落

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39534100

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

HTML选择器总结

m0_63841538的博客

03-28

1254

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式（实现伪。ID选择器是在标签中加一个名字，且改名字是唯一的。通用的兄弟选择器智慧选择他身后紧紧挨着的一类。子代选择器获取的是某个标签里面的第一级子标签。ID选择器>类选择器>标签选择器>通用选择器。后代选择器获取的是某个标签里面所有的子标签。三、子代选择器，后代选择器，逗号选择器。三、标签选择器、ID选择器、类选择器。二、相邻兄弟选择器和通用的兄弟选择器。标签选择器是根据标签的名称获取的。一、交集选择器和并集选择器。

HTML兄弟选择器分为哪两种,CSS的兄弟选择器 + 和 ~ 的区别

weixin_33364098的博客

06-03

1153

CSS的兄弟选择器 + 和 ~ 的区别发布时间:2018-01-19 14:30:59这是个ul同父元素的第一个p这是第一个li。这是第二个li。这是第三个li。这是第四个li。这是个ul同父元素的第二个p这是个ul同父元素的第三个p效果图：1.+(1)同一个父元素的不同元素兄弟，+只会影响后面对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)ul + p{color:gre...

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

CSS基础

最新发布

weixin_45086164的博客

08-09

858

CSS基础

HTML兄弟选择器分为哪两种,jQuery兄弟选择器

weixin_39599046的博客

06-03

137

我首先考虑使用:contains()，但是当我阅读文档时，我意识到它确切地检查它所说的内容，如果它包含某些内容，则不是完全匹配。我没有找到任何速记功能，但您可以使用filter()。例如，：contains('100')也将匹配1000。代码：强>$('input[name=Check100]').change(function() {var myChecked = $(this).attr...

HTML + CSS 连载 | 09 - CSS 兄弟选择器与选择器组

JingnanJia的博客

10-16

444

交集选择器可以定位到同时符合两个选择器的条件的元素，通常在开发中为了精确的选择某一个元素会使用交集选择器，交集选择器的两个选择器之间紧密相连，没有空格或者逗号隔开，如。并集选择器能定位到符合多个选择器中的一个选择器的元素，两个选择器以上，以逗号分割，在开发中共通常为了给多个元素设置相同的样式时会使用并集选择器，如。兄弟选择器可以通过目标元素同级的其他元素的选择器选中，直接相邻的兄弟选择器使用。后代选择器可以选择所有元素的后代，包括直接和间接的，选择器之间通过空格分割；开发中属性选择器的使用频率一般。

html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...

weixin_42406333的博客

06-03

2297

兄弟选择器版本：CSS3定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素。只作用于同级元素.这两个元素必须具有相同的父元素。F不必紧跟E。语法:E~F{sRules}选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。需要注意的是，选择的只是同级的元素F，后代中的元素不会被选择。浏览器支持所有浏览器都支持例子只选择E元素之后的元素F，出现在E元素之前的元素F，不会被选择到。h3 ~...

html之兄弟元素选择器

qq_41555580的博客

05-12

812

CSS的相邻兄弟选择器用法简单讲解

09-24

CSS的相邻兄弟选择器是CSS选择器中用于定位和样式化具有相同父元素的相邻元素的工具。它的主要作用是选取紧接在另一个元素后的元素，且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单，只需要理解...

两种CSS3伪类选择器详细介绍

12-13

css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类我们把":enabled",":disabled",":...

html中css三种常见的样式选择器

12-13

本文将详细讲解三种常见的CSS选择器：标签选择器、ID选择器和类选择器。 1. 标签选择器：标签选择器是最基础的选择器类型，它根据HTML元素的标签名来选取元素。例如，在以下示例中，`p`标签选择器将应用于所有的...

JSoup CSS选择器用法大全

08-15

JSoup 是一个 Java 库，它提供了强大的解析和操作 HTML 的功能，其中一个核心特性就是支持 CSS 选择器。CSS 选择器是用于选取 HTML 或 XML 文档中元素的语法，它们在网页爬虫、页面解析以及动态网页内容的提取中扮演...

CSS3---2.兄弟选择器(准确来说叫弟弟选择器,只能向下选)

weixin_30323631的博客

03-13

148

兄弟伪类： +：获取当前元素的相邻的满足条件的元素 ~：获取当前元素的满足条件的兄弟元素下面这句样式说明查找：添加了.first样式的标签的相邻的li元素 1.相邻 2.必须是指定类型的元素*/ .first + li{ color: blue; } 下面样式查找添加了.first样式的元素...

兄弟选择器

coolchaobing的博客

07-28

3892

认识兄弟选择器

html相邻兄弟选择器,CSS CSS 相邻兄弟选择器 - 闪电教程JSRUN

weixin_39797381的博客

06-03

314

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}这个选择器读...

html兄弟选择器怎么用,html – 样式兄弟选择器与：访问

weixin_28964839的博客

06-03

135

这样我们就可以做到.a {text-decoration: underline;color: black;}#image {position: absolute;visibility: hidden;top: 30%;left: 60%;}a:visited {color: red;}a:visited + #image {visibility: visible;}a:hover {color: ...

VSCode 开发Vue必备插件

2301_78416672的博客

05-06

616

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

html兄弟选择器怎么用,HTML+CSS入门 CSS选择器之兄弟选择器

weixin_42498585的博客

06-03

515

本篇教程介绍了HTML+CSS入门 CSS选择器之兄弟选择器，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<先来代码说话：(1)、‘~’选择器html>Document.h3~p{color:red;}这是段落标签这是段落标签这是段落标签这是标题标签这是段落标签这是段落标签这是段落标签这是标题标签这是段落标签这是段落标签这是段落标签效果如下：(2)、‘+’选择...

html兄弟选择器怎么用,CSS的相邻兄弟选择器用法示例讲解

weixin_42307436的博客

06-03

1460

对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:可选择紧接在另一个元素后的元素，且二者有相同的父级元素下面代码中，item2和item3会有效果，而item1不会有HTML代码：item1item2item3CSS代码：li+li { font-size: 50px; }1、如果需要选择紧接在另一个元素后的元素，而且二...

HTML中CSS样式的三种应用方法与选择器详解

CSS选择器是CSS中用于选取元素的关键概念，包括： 1. 元素选择器：通过元素名称选取元素，如`p {color:red}`将所有段落文字设为红色。 2. 类选择器：通过`.`后跟类名选取元素，如`.red {color:red}`，需在元素`...