【CSS】浅谈css兄弟选择器

最新推荐文章于 2024-03-14 16:16:42 发布

GHUIJS

最新推荐文章于 2024-03-14 16:16:42 发布

阅读量821

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_43599959/article/details/126735786

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

拷贝自菜鸟教程

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

栗子

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