不容錯過的 11 項 HTML/JS/CSS 技巧。
通過以下 HTML/CSS/JavaScript 相關技巧，希望能幫助大家填補一點點關於前端開發方面的知識空白。
1.Datalist
元素這項 HTML 元素的使用頻率極低，今天我們就要爲它正名！
< datalist>標籤用於爲< input>元素提供一項“自動補全”功能。在鍵入過程中，您會看到如下圖所示的預定義下拉菜單及選項。
示例：
<input**list="animals"**name="animal" id="animal"><datalist**id="animals"**>
<option value="Cat">
<option value="Dog">
<option value="Chicken">
<option value="Cow">
<option value="Pig">
</datalist>
2. 帶有複選框的可點擊標籤
如果大家希望使用帶有複選框的可點擊標籤，最常見的作法可能是將 label 元素與“for”屬性結合使用，詳見以下代碼。
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">I agree</label>
實際上，您完全可以將 label 元素直接放在複選框旁邊以達成相同的效果。這樣，我們就能點擊“I agree”並輕鬆選中該複選框！
示例：
<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value"></label>
3. 子選擇器
這可能是本份清單中知名度最高的技巧了，但大多數朋友並沒有意識到它的強大力量。
子選擇器用於匹配某一指定元素的全部子元素。它能夠給出兩項元素之間的關係。
示例：
/* 1st <li> element */
li:first-child{
color: red;
}
/* Last <li> element */
li:last-child{
color: green;
}
// Select All <li> elements but The First Three */
li:nth-child(n+4) {
color: yellow;
}
/* Select only the first 3 <li>elemets*/
li:nth-child(-n+3) {
color: green;
}
/* Styles are elements that are not a <p> */
.my-class:not(p) {
display: none;
}
4. 寫作模式
寫作模式是一項鮮爲人知，但卻極爲強大的 CSS 屬性。
原文鏈接:【https://www.infoq.cn/article/02EL7dcUZ0w53q9TkKXC】。未經作者許可，禁止轉載。