这篇文章主要介绍css3兄弟选择器怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ CSS3中兄弟选择器的语法：1、“+”兄弟选择器，语法为“指定元素
这篇文章主要介绍css3兄弟选择器怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
CSS3中兄弟选择器的语法：1、“+”兄弟选择器，语法为“指定元素+选择元素{css代码}”，该选择器表示选择某元素后相邻的兄弟元素；2、“～”兄弟选择器，语法为“指定元素～选择元素{css代码}”，该选择器表示某元素后所有同级的指定元素。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
CSS3兄弟选择器(+、～)
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。对它们的讲解如下。
1. 临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
下面通过一个案例对临近兄弟选择器的用法进行演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3紧邻兄弟选择器用法-Http://WEB.itheima.com</title>
<style type="text/css">
p + h3{
color: green;
font-family: "宋体";
font-size: 20px;
}
</style>
</head>
<body>
<body>
<h3>《赠汪伦》</h3>
<p>李白乘舟将欲行，</p>
<h3>忽闻岸上踏歌声。</h3>
<p>桃花潭水深千尺，</p>
<h3>不及汪伦送我情。</h3>
</body>
</html>在上述代码中，第7～11行代码用于为p元素后紧邻的第一个兄弟元素h3定义样式。从结构中看出p元素后紧邻的第一个兄弟元素所在位置为第17行代码，因此第17行代码的文字内容将以所定义好的样式显示。
从图中可以看出，只有紧跟p元素的h3元素应用了代码中设定的样式。
2.普通兄弟选择器
普通兄弟选择器使用“～”来链接前后两个选择器。查找某一个指定元素的后面的所有兄弟结点。
下面通过一个案例对普通兄弟选择器的用法进行演示，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3普通兄弟选择器~用法-http://web.itheima.com</title>
<style type="text/css">
p ~ h3{
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}
</style>
</head>
<body>
<body>
<h3>《赠汪伦》</h3>
<p>李白乘舟将欲行，</p>
<h3>忽闻岸上踏歌声。</h3>
<h3>桃花潭水深千尺，</h3>
<h3>不及汪伦送我情。</h3>
</body>
</html>
从图中可以看出，p元素后面的所有兄弟元素h3都应用了代码中所设定的样式。
以上是“CSS3兄弟选择器怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网JavaScript频道！
--结束END--
本文标题: CSS3兄弟选择器怎么用
本文链接: https://www.lsjlt.com/news/94948.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0