CSS是一種層疊樣式表語言,用于為HTML和XML文檔添加樣式和布局。CSS實現表單選擇是很常見的需求,下面我們來看一些實例。
/* 選中表單的第一個input */ input:first-of-type { background-color: yellow; } /* 選中表單的最后一個input */ input:last-of-type { background-color: yellow; } /* 選中表單的第一個和第二個input */ input:nth-of-type(1), input:nth-of-type(2) { background-color: yellow; } /* 選中alt屬性為'post'的圖像 */ img[alt='post'] { border: 1px solid #000; } /* 選中type屬性為button的按鈕 */ input[type='button'] { background-color: yellow; } /* 選中type屬性為radio的表單 */ input[type='radio'] { margin: 10px; } /* 選中type屬性以text開頭的表單 */ input[type^='text'] { width: 200px; } /* 選中type屬性包含text的表單 */ input[type*='text'] { width: 200px; } /* 選中type屬性以text結尾的表單 */ input[type$='text'] { width: 200px; }
總結一下,我們可以使用:first-of-type、:last-of-type、:nth-of-type、屬性選擇器等眾多方式來選擇表單元素。使用CSS實現表單選擇可以為我們實現表單樣式化提供便利。