不容错过的 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】。未经作者许可，禁止转载。