Categories
程式開發

前端開發者們值得了解的11 項前端技巧


不容錯過的11 項HTML/JS/CSS 技巧。

通過以下HTML/CSS/JavaScript 相關技巧,希望能幫助大家填補一點點關於前端開發方面的知識空白。

1.數據清單

元素這項HTML 元素的使用頻率極低,今天我們就要為它正名!

標籤用於為元素提供一項“自動補全”功能。在鍵入過程中,您會看到如下圖所示的預定義下拉菜單及選項。

前端開發者們值得了解的11 項前端技巧 1

示例:








列出的屬性(參見上方粗體)必須等於的id,因為需要將二者捆綁使用。

2. 帶有復選框的可點擊標籤

如果大家希望使用帶有復選框的可點擊標籤,最常見的作法可能是將label 元素與“for”屬性結合使用,詳見以下代碼。



實際上,您完全可以將label 元素直接放在復選框旁邊以達成相同的效果。這樣,我們就能點擊“I agree”並輕鬆選中該複選框!

示例:


3. 子選擇器

這可能是本份清單中知名度最高的技巧了,但大多數朋友並沒有意識到它的強大力量。

子選擇器用於匹配某一指定元素的全部子元素。它能夠給出兩項元素之間的關係。

示例:

/* 1st 
  • element */ li:first-child{ color: red; } /* Last
  • element */ li:last-child{ color: green; } // Select All
  • elements but The First Three */ li:nth-child(n+4) { color: yellow; } /* Select only the first 3
  • elemets*/ li:nth-child(-n+3) { color: green; } /* Styles are elements that are not a

    */ .my-class:not(p) { display: none; }

  • 4. 寫作模式

    寫作模式是一項鮮為人知,但卻極為強大的CSS 屬性。

    原文鏈接:【https://www.infoq.cn/article/02EL7dcUZ0w53q9TkKXC】。未經作者許可,禁止轉載。