【CSS】浅谈css兄弟选择器

拷贝自菜鸟教程

element+element	div+p	选择所有紧跟在元素之后的第一个元素
element1~element2	p~ul	选择p元素之后的每一个ul元素

栗子


<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            font-family: '方正姚体';
        }
        p+div{
            background: red;
        }
        p~div{
            /*font: italic semi-expanded bold 25px/50px '';*/
            font: 30px '';
            background: blue;
        }
    style>
head>
<body>
  <p>我是pp>
  <div>东方丽景div>
  <div>2div>
  <div>3div>
  <div>4div>
  <div>5div>
  <div>3div>
body>

tips:可用于开发移动端时,是否需要顶部导航给页面content添加同样式

比如：


/** content **/
.ui-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	font-size: .28rem;
	padding-bottom: .5rem;
	-webkit-overflow-scrolling: touch;
	color: var(--text);
	background-color: #f2f2f2;
}
 
/* 当存在头部导航时给ui-content加上padding */
.ui-header+.ui-content {
	padding-top: .8rem;
}

相关阅读:
【考研数学】高等数学第七模块 —— 曲线积分与曲面积分 | 4. 对坐标的曲面积分（第二类曲面积分）与场论初步
图片对比相似度算法标准,图片相似度匹配算法
Java基础之浅谈继承、多态
在 Python 中使用 Pillow 进行图像处理【2/4】
面向对象的个人理解（从C/C++到Java）
并发调用deepseek API，构建多轮对话数据
【MATLAB GUI】 5. 图像处理菜单（菜单编辑器）
SQL学习笔记1：SQL语句可以分三类
C++ Reference: Standard C++ Library reference: C Library: cstring: strcpy
Tomcat 部署 war 包

原文地址：https://blog.csdn.net/m0_43599959/article/details/126735786