1 偽類選擇器
1.1 :empty 選擇內(nèi)容為空的元素。:not(:empty) 不為空的元素。
舉個栗子：
<body>
<div class="Alert">
<p>Success! Your profile has been updated.</p>
</div>
<div class="Alert">
</div>
</body>
.Alert {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
}
Screen Shot 2017-04-03 at 12.15.04 PM.png
如果想讓空的alert隱藏可以：
.Alert:empty {
display: none;
}
但更簡單的方法是：
.Alert:not(:empty) {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
}
這樣的嵌套式使用偽類選擇器的例子還有很多
比如:not(:last-child),:not(:first-child)。
1.2 選擇同類元素中的第一個/第n個/唯一一個等。也非常實用。
first-of-type
last-of-type
only-of-type
nth-of-type(odd)
nth-of-type(even)
nth-of-type(3)
nth-of-type(4n+3)
2.calc()實現(xiàn)響應(yīng)式設(shè)計
比如一個這樣結(jié)構(gòu)的網(wǎng)頁，包含nav，main，aside三部分。
Screen Shot 2017-04-03 at 1.19.38 PM.png
nav {
position: fixed;
top: 0;
left: 0;
width: 5rem;
height: 100%;
}
aside {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 20rem;
}
當(dāng)屏幕尺寸變化的時候，希望保持當(dāng)前的布局，讓中間的content隨之變化，只需要一行css就能實現(xiàn)了。
main {
margin-left: 5rem;
width: calc(100% - 25rem);
}
如下圖gif動圖展示效果：
responsivecontent.gif
再加上一些media query，就是一個完整的針對移動設(shè)備和pc的響應(yīng)式css。
3.用vh，vw規(guī)定元素大小
經(jīng)常被使用到的單位是px，em，rem
你有沒有用過更簡單的vh，vw呢，這兩個單位是相對于當(dāng)前viewport的百分比?？梢院芎唵蔚目刂圃卦趘iewport中的相對位置：
.Box {
height: 40vh;
width: 50vw;
margin: 30vh 25vw;
}
只需要這一點點css就能讓box這個元素不論viewport size如何變化都保持永遠居中。因為height+marginTop+ marginBottom = 100vh, width+marginLeft+marginRight = 100vw。
alwaycenter.gif
用這樣的方法很簡單就能寫出一個整頁page上下滑的網(wǎng)頁效果：
ezgif.com-resize.gif
沒有用到任何js,非常簡單的css，如下：
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
如果覺得有用，請給我點個贊吧(? ??_??)?!
