CSS相邻兄弟选择器

最新推荐文章于 2023-10-08 17:48:53 发布
最新推荐文章于 2023-10-08 17:48:53 发布
阅读量442 收藏 1
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=h1kj00cak2jb&title=CSS%E7%9B%B8%E9%82%BB%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8
版权

css相邻兄弟选择器：可选择紧接在另一元素后面的元素，且二者有相同的父元素。

　　例如：如果要增加紧接在h1元素后出现的段落的上边距：

　　　　h1   p { margin-top:50px;}

　　与 “ ” 选择器非常容易混淆的是 “~”选择器： 该选择器的作用是查找某一个指定元素后面的所有兄弟节点。

具体例子如下：

HTML：
<body>
    <div class="box">
        <h1>标题</h1>
        <p class="p1">段落一的文字</p>
        <p class="p2">段落二的文字</p>
        <p class="p3">段落三的文字</p>
        <p class="p4">段落四的文字</p>
    </div>
</body>

 当css代码如下时：

.box h1   p {color:red;}

得到的页面样式：

当css的代码为：

.box h1 ~ p {color:red;}

得到的页面样式为：

 

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSoup CSS选择器用法大全
08-15
- `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素，即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素，但不是紧邻的同级元素。 在爬虫开发中，利用这些 CSS 选择器，可以精准地...
css 元素选择器的简单实例
09-24
例如，通过子选择器（`>`）和相邻兄弟选择器（`+`）来选择特定元素的子元素或相邻元素，实现更精准的样式定位。 总的来说，CSS元素选择器是CSS基础中的关键部分，它为我们提供了对HTML元素样式控制的能力。熟练掌握...
css相邻兄弟选择器
qq_45989814的博客
07-18 1467
css相邻兄弟选择器
CSS 相邻兄弟选择器
heiyou007的博客
08-31 1745
学习w3school的CSS教程，在学到相邻兄弟选择器（Adjacent sibling selector）时，出现了一点疑惑。 文中的例子如下： 对于这段代码，教程中是这样解释的， 请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器： li + li {font-weight:bold;} 上面这个选择器只会把列表中的第二个和第三个列表项变为粗
【CSS】相邻兄弟选择器
德仔
06-15 5146
相邻兄弟选择器
css3的相邻选择器,CSS选择器之相邻兄弟选择器
weixin_33327330的博客
08-03 4232
选择器是css里面非常重要的一部分知识，根据不同的样式定义,CSS提供了不同类型的选择器，大家可以根据自己的实际情况选择合适的选择器来编写代码，前面的课程我们对类选择器，子元素选择器等作了介绍，下面让我们一起来探讨一下相邻兄弟选择器。一、定义相邻兄弟选择器(Adjacentsiblingselector)可选择紧接在另一元素后的元素，且二者有相同父元素。例如，如果要改变紧接在h2元素后出现的段落的...
css相邻兄弟选择器+
m0_71099325的博客
10-08 47
【代码】css相邻兄弟选择器+
html相邻兄弟选择器,CSS CSS 相邻兄弟选择器 - 闪电教程JSRUN
weixin_39797381的博客
06-03 302
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}这个选择器读...
012_CSS相邻兄弟选择器
aihiao的专栏
10-14 354
1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素。 2. 选择相邻兄弟 2.1. 如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素, 可以使用相邻兄弟选择器(Adjacent sibling selector)。 2.2. 例如, 如果要增加紧接在h1元素后出现的段落的上边距, 可以这样写: h1 + p {margin-top:50px;} 3. 语法解释 3.1. 相邻兄弟选择器使用了加号(+), 即
css相邻兄弟选择器和同辈选择器的区别
qq_46176479的博客
07-30 1280
1.相邻兄弟选择器，定义+号后面那个选择器的属性。 选择器1+选择器2{声明1；声明2；…} 在HTML代码中，（引用）选择器1元素后面相邻着（引用）选择器2元素，则属性声明有效。 标准浏览器才支持。 提示：必须相邻才会有效。 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> .br
【CSS兄弟选择器】
qq_44847590的博客
12-08 8365
最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的。选中h2下面的类名为on的元素 ： h2~.on{ }表示某元素后所有同级的指定元素，选中的是所有的。选中h2下面的第一个p ： h2+p{ }选中h2下面的所有p ： h2~p{ }
CSS的相邻兄弟选择器用法简单讲解
09-24
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
css 选择器 介绍
09-27
- **相邻兄弟选择器**：使用`+`符号选择紧跟在另一个元素之后的同级元素。例如，`h1 + p {margin-top: 0;}`将清除所有紧接在`h1`后的`p`元素的上外边距。 - **通用选择器**：星号`*`选择所有元素。`* {margin: 0;...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
pillow-10.4.0-cp312-cp312-musllinux_1_2_aarch64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
CSS选择器优先级与实战练习解析
5. **后代、子代、相邻兄弟、后续兄弟选择器**： - `selector1 selector2` 后代选择器，如`div p`。 - `selector1 > selector2` 子代选择器，如`div > p`。 - `selector1 + selector2` 相邻兄弟选择器，如`div + ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值