[CSS] Siblings selector
CSS Selector
2023-09-14 08:59:13 时间
For example, we have current html code:
<main class="grid-wrap"> <div class="grid"> <span>One column default</span> </div> <div class="grid"> <span>Half column 1</span> <span>Half column 2</span> </div> <div class="grid"> <span>3-col 1</span> <span>3-col 2</span> <span>3-col 3</span> </div> <div class="grid"> <span>4-col 1</span> <span>4-col 2</span> <span>4-col 3</span> <span>4-col 4</span> </div> </main>
We have mulit .grid class, let's say we want to have some margin between each .grid element, but not affecting the first .grid element. we can use Siblings Selector:
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax($minWidth, 1fr)); grid-gap: $gridGap; & + .grid { margin-top: $gridGap; } }
It means, beside the very first .grid element, apply css to all the rest element which have .grid class.
Layouting element like this way, we can safely add padding to the outmost container, without worrying the first .grid element's margin will affect the layout.
相关文章
- css opacity属性_CSS中的opacity属性[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css 更改所有text,CSS之cssText「建议收藏」
- css display属性的值及用法_css clear作用
- 【说站】css有哪些清除浮动的方法
- 【说站】css中浮动如何理解
- 【说站】css安装LESS的方法
- HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)[通俗易懂]
- 了解元素定位css-selector 、Python库BeautifulSoup 等
- 「趣学前端」@layer,你好,CSS的新特性
- CSS容器查询终于来了
- CSS媒体查询_css网页
- CSS 换行_css不允许换行
- 如何在canvas中模拟css的背景图片样式
- CSS 02 border-radius
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
- 【ES三周年】一文弄懂css权重
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- 学习CSS的10大理由
- CSS制造:鼠标移上去显示大图
- 效果直逼flash的Div+Css+Js菜单
- CSS网页布局入门教程10:带当前标识的标签式横向导航
- 纯CSS制作的新闻网站中的文章列表
- DIV+CSS网页另类上下布局的实例代码
- juqery学习之六CSS--css、位置、宽高