- ID 选择器, 如 #id{}
- 类选择器, 如 .class{}
- 属性选择器, 如 a[href="segmentfault.com"]{}
- 伪类选择器, 如 :hover{}
- 伪元素选择器, 如 ::before{}
- 标签选择器, 如 span{}
- 通配选择器, 如 *{}
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
比如我们有一个列表,包含10个以上的item:
<ol>
<li>e4rt</li>
<li>66ert</li>
<li>i9etr</li>
<li>fsdg</li>
<li>gh</li>
<li>gh</li>
<li>fwr</li>
<li>ue56</li>
<li>34s</li>
</ol>
为开头的前2个item和结尾的后2个item加红色
li:nth-child(-n+2),li:nth-last-child(-n+2) {
color: red;
}
为中间的第4个~6个item加蓝色
li:nth-child(n+4):nth-child(-n+6) {
color: blue;
}
<div class="left">
<p>Left</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right</p>
</div>
.left {
background-color:#2196F3;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%; /* The width is 60%, by default */
}
.right {
background-color:#4CAF50;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left , .main, .right {width:100%;}
}
- CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
- A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
- Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
- If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.