如果我们想要匹配紧跟在第一个选择器后出现的元素，我们可以使用相邻兄弟选择器（+）。在这里，两个选择器都是同一个父元素的子元素。
CSS相邻兄弟组合器的语法如下：
Selector + Selector{ attribute: /*value*/}
如果我们想选择同一父元素下的兄弟元素，不考虑第二个选定元素的位置，我们可以使用CSS通用兄弟选择器。
CSS通用兄弟选择器的语法如下：
Selector ~ Selector{ attribute: /*value*/}
下面的例子演示了CSS相邻和一般兄弟选择器属性。
立即学习“前端免费学习笔记（深入）”；
例子
演示
#parent { display: flex; margin: 2%; padding: 2%; box-shadow: inset 0 0 24px cyan; justify-content: space-around;}div + p { font-size: 1.2em; font-weight: bold; background: powderblue;}section { box-shadow: 0 0 3px rgba(0,0,0,0.8);}
Check this
Some text in section
Selected
华锐行业电子商务系统 华锐行业电子商务系统2.0采用微软最新的.net3.5（c#）+mssql架构，代码进行全面重整及优化，清除冗余及垃圾代码，运行速度更快、郊率更高。全站生成静态、会员二级域名、竞价排名、企业会员有多套模板可供选择；在界面方面采用DIV+CSS进行设计，实现程序和界面分离，方便修改适合自己的个性界面，在用户体验方面，大量使用ajax技术，更加易用。程序特点:一、采用微软最新.net3.5+MSSQL
0 查看详情 
输出
这将产生以下结果 –
示例
现场演示
#parent { display: flex; margin: 2%; padding: 2%; background: thistle; justify-content: space-between;}section ~ p { text-align: center; font-size: 1.2em; font-weight: bold; background: lavender;}Random text 1
Some text in section
Selected
输出
这将产生以下结果 −
以上就是使用 CSS 选择同级元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626064.html
微信扫一扫 
支付宝扫一扫 
