兄弟选择器

最新推荐文章于 2024-04-22 11:34:50 发布

jwz934738949

最新推荐文章于 2024-04-22 11:34:50 发布

阅读量4.2k

点赞数 3

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/88853477

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

兄弟选择器，指的是在同一级的情况下，修改当前同一级的标签的样式。

1、相邻兄弟选择器

两个标签相邻时，使用相邻兄弟选择器，可以对后一个标签进行样式修改。

格式：标签1+标签2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        h2 + h1 {
            color: yellow;
        }
    </style>
</head>
<body>
<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>
<p>4444</p>
<p>5555</p>
</body>
</html>

2、通用兄弟选择器

当两个标签不相邻时，要想修改后一个标签的样式，需要使用通用兄弟选择器。

格式：标签1~标签2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        h2 ~ p {
            color: fuchsia;
        }
    </style>
</head>
<body>
<h2>1111</h2>
<h1>2222</h1>
<p>3333</p>
<p>4444</p>
<p>5555</p>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jwz934738949

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
兄弟选择器

兄弟选择器，指的是在同一级的情况下，修改当前同一级的标签的样式。1、相邻兄弟选择器两个标签相邻时，使用相邻兄弟选择器，可以对后一个标签进行样式修改。格式：标签1+标签2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&gt...
复制链接

扫一扫