在这个表单的基础上,修改表单的样式,实现每三个一循环
时间: 2024-06-09 12:05:36 浏览: 5
可以使用 CSS 的伪类选择器 `nth-child()` 来实现每三个一循环的效果。具体的做法是,选中每个表单元素之后,使用 `nth-child()` 选择器来设置样式,让每 3 个元素的样式不同。以下是一个示例代码:
HTML 代码:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<label for="age">年龄:</label>
<input type="number" id="age" name="age">
<label for="phone">电话:</label>
<input type="tel" id="phone" name="phone">
</form>
```
CSS 代码:
```css
form label,
form input,
form select {
display: block;
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
}
/* 每 3 个一循环,设置不同的背景颜色 */
form label:nth-child(3n+1),
form input:nth-child(3n+1),
form select:nth-child(3n+1) {
background-color: #f2f2f2;
}
/* 设置选中状态的样式 */
form label:hover,
form input:hover,
form select:hover {
background-color: #e6e6e6;
}
/* 设置聚焦状态的样式 */
form label:focus-within,
form input:focus,
form select:focus {
outline: 2px solid #007fff;
}
```
运行结果:
![每三个一循环的表单样式](https://i.imgur.com/Cz9QJq7.png)
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)