前端八股学习1.2之‘+‘选择器和‘~‘选择器的区别

已于 2022-02-19 22:41:33 修改
阅读量283 收藏
点赞数 2
分类专栏： 前端八股 文章标签： 前端 css3 css
于 2022-02-19 21:35:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EZNGUP/article/details/123024255
版权
本文探讨了CSS3中相邻兄弟选择器'+'和通用兄弟选择器'~'的区别。'+'选择器用于选取紧跟在某一元素后的同级元素，而'~'选择器则能选取指定元素之后的所有同级元素。
摘要由CSDN通过智能技术生成

‘+’:相邻兄弟选择器

选择具有相同父元素的紧接在一个元素后的另一个元素

<style>
	h1 + p{
   
		font-weight: bold;
	}
</style>

	<h1></h1>
	<p>123
最低0.47元/天 解锁文章
mky-ze
关注
专栏目录
前端进阶之——基础选择器
N奈斯先生的博客
08-20 254
   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。   致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨 目录 一、基础选择器 二、每日面试题 一、基础选择器 1、什么是选择器？ 选择标签，根据不同需求把不同标签选出来 2、选择器分类： 选择器分为基础选择器和符合选择器 一、基础选择器 标签选择器：将HTML标签名作为选择器，将某一类选择出来，如所有的div，不能差异化样式 <style>
css选择器“+”和“~”的区别
Hey firefly
04-04 1409
最大的区别是’+’最多只能匹配到一个元素，而’~’可以匹配到多个。 ‘+’是指紧跟在后面的某同级元素 ‘~’是指某些同级元素 以以下代码为例<div class='try'></div> <p class='one'></p> <p class='two'></p>如果是+.try + p那么选中的只是类名为one的p如果是~.try ~ p那么选中的是类名为one和类名为two的p<div
选择器~和+的区别。
subsistent的博客
03-25 410
box + span ：则匹配选中box相邻下符合条件的第一个元素，既是 two。.box ~ p ：可以选中box下的所有p元素，既是 one 和 three。1.选择紧跟着当前符合条件元素后面的同级元素。1.选择紧跟在当前符合条件元素后面的同级元素。例：
Css中选择器~和选择器+的区别
coucouxie的博客
01-31 578
最近在项目中发现自己的css比较的薄弱，所以就把自己的一些不理解或者不熟悉的地方进行巩固和了解。 Css中选择器+的功能,可以用来选择出同级的相邻节点比如。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
CSS3总结——选择器
lihaoen666的博客
09-08 304
基本选择器子元素选择器（IE8+）语法：父元素 > 子元素相邻兄弟元素选择器（IE8+）语法：元素 + 兄弟相邻元素通用兄弟元素选择器（IE8+）语法：元素 ~ 后面所有兄弟相邻元素群组选择器将具有相同样式的元素分组在一起，使用“，”隔开语法： 元素1 ， 元素2 ，…元素n属性选择器对带有指定属性的HTML元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素
html中加号是什么选择,CSS的+(加号)选择器怎么用
weixin_39840616的博客
05-31 338
在CSS中“+”符号选择器用于选择紧跟在指定元素之后但不在特定元素内部的元素。下面本篇文章就来具体介绍一下，希望对大家有所帮助。“+”符号选择器在CSS中“+”符号选择器被称为相邻兄弟选择器，用于选取在同一父元素下的，紧跟指定元素之后的另一个元素。【视频教程推荐：CSS教程】基本句式：元素E + 元素F{//CSS属性}说明：所有主流浏览器都支持“+”符号选择器；但在IE8中运行，必须声明 。简单...
前端面试八股文【很经典 很全面 字字珠玑】【建议收藏+关注】
最新发布
2301_82244607的博客
05-02 722
流动定位：保持在标准文档流中原有的位置，元素是按从左往右，从上往下的顺序摆放， left,top等属性无效相对定位：相对定位是指相对于盒子元素原有的位置进行偏移，不会脱离标准文档流，也不对其他元素产生任何影响。需设定垂直方向和水平向的偏移量，分别是left、top、right、bottom。绝对定位：绝对定位是以某一个点为基准进行偏移。绝对定位是以最近的一个已定位的父级元素为基准，如果父级元素没有定位或没有父级元素，则以浏览器窗口为基准；会脱离标准文档流，不影响同一级的盒子元素位置。
【八股文】---前端面试经验总结
qq_53061847的博客
05-29 1356
前言 一、HTML+CSS 基础知识https://zhuanlan.zhihu.com/p/28415923 HTML与CSS基础总结 一. 认识WEB 1.浏览器的分类和内核 2.图解web标准 二. HTML基础 1.文档类型 2.页面语言lang 3. 字符集 4.标签语义化 5.锚点定位 6.base 标签 7.特殊符号 三. CSS选择器 1.三种样式表总结 2.CSS基础选择器 3.font字体 4.CSS外观属性总结
前端-面试八股文(知识点笔记)
qq_47622441的博客
12-21 1408
a. 浏览器请求资源时首先命中资源的Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，可以通过Cache-control: max-age指定最大生命周期，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。b. 强缓存失效，进入协商缓存阶段，首先验证ETagETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。服务器根据客户端上送的If-None-Match值来判断是否命中缓存。
Java八股文
earn_est的博客
03-07 1万+
我是2022届双非软件工程应届生，目前在准备秋招，总结了一篇不错的八股文，如果你正好需要可以关注一下，共同学习；超链接如下： Java后端八股文（CSDN不再同步） 语雀地址 Hello, interviewer. My name is . I graduated from Zhengzhou University of Light Industry, majoring in software engineering and I will graduate next year. I have exper
html中 号选择器,CSS兄弟选择器符号‘+’号与‘~’号的区别
weixin_42325867的博客
06-04 2458
今天有人问我，在CSS的兄弟选择器中'+'号和'~'号码的区别是什么，而我自己对这个问题也不是很清除，当然，如果想弄清楚一个问题，用实践的方式比较好，今天就通过举几个例子来说明一个，CSS选择器中的加号和“~”号的区别在什么地方！CSS兄弟相邻选择器加号相邻兄弟选择器使用了加号(+)，即相邻兄弟结合符(Adjacent sibling combinator)。注释：与子结合符一样，相邻兄弟结合符旁...
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
树上骑个猴的博客
12-21 1万+
~（波浪号） ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 <style> h3~h5{ color: red; } </style> <body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
CSS兄弟选择器 ~ 和 +
大小都是愁的成长之路
07-09 5529
‘~’选择器则表示某元素后所有同级的指定元素，强调所有的 '+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的
兄弟选择器(+ 和 ~)
热门推荐
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
元素选择器 （+， ~）
weixin_30699831的博客
01-24 853
元素选择器中w3cschool中有些翻译不太准确 比如 +：其实是与element1元素同级，位于element1元素之后的第一个element2元素 ~：其实是与element1元素同级，位于element1元素之后的所有element2元素 1. 资料 1 <!DOCTYPE html> 2 <html ...
css3属性选择器，css中“~”（波浪号）、“，”（逗号）、“+”（加号）和（大于号）详解
林中明月间丶
04-12 1万+
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta
css有几种选择器，有什么区别？
weixin_42520375的博客
01-08 2132
基本选择器 1.标签选择器：直接用元素的标签来进行选择 span { // 直接选择span标签 size:16px; } 2.ID选择器：通过设置id名字，进行精确的选择，用#来定义 # div1 { //通过id名字来进行选择 color:red; } <div id="div1">1</div> 3.类选择器:通过类名来进行选择，选择范围比id选择器大，...
C++八股B树和B+树的区别
09-22
B树和B树有一些区别。B树是一种自平衡的搜索树，它允许每个节点有多个子节点。B树的节点包含了多个关键字和对应的记录，而且节点的子节点数量比关键字数量多1。B树的特点是提供了更高的存储和查找效率，适合在磁盘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值