输入框2hhhhhhh
输入框1
以上述代码为例
.input2 {
background-color: #f2f2f2; /* 浅灰色背景 */
border: 2px solid #007bff; /* 蓝色边框 */
color: #333; /* 字体颜色 */
font-size: 16px; /* 字体大小 */
padding: 10px; /* 内边距 */
border-radius: 5px; /* 边框圆角 */
width: 300px; /* 宽度 */
transition: border-color 0.3s; /* 平滑过渡效果 */
}
input {
border: 1px solid #ccc;
}
#input1 {
border: 1px solid #ccc;
}
div input {
margin: 5px;
}
div > input {
margin: 5px;
}
.input2 + p {
color: red;
}
.input2 ~p{
background-color: #c39494;
}
区别:
兄弟元素
这种选择器用于选择具有指定属性的元素,而不考虑属性的值。
input[type] {
/* 选择所有具有type属性的input元素 */
}
这种选择器用于选择具有指定属性且属性值完全等于给定值的元素。
input[type="text"] {
/* 选择所有type属性值为"text"的input元素 */
}
包含特定字符串:使用*=来选择属性值中包含指定子字符串的元素。
input[name*="email"] {
/* 选择所有name属性值中包含"email"的input元素 */
}
以特定字符串开头:使用^=来选择属性值以指定字符串开头的元素。
input[name^="user"] {
/* 选择所有name属性值以"user"开头的input元素 */
}
以特定字符串结尾:使用$=来选择属性值以指定字符串结尾的元素。
input[name$="number"] {
/* 选择所有name属性值以"number"结尾的input元素 */
}
使用|分隔的值:这种选择器用于选择属性值由空格分隔的多个值之一与给定值相匹配的元素。但是,需要注意的是,这种用法主要是用于lang属性,并且在实际应用中可能不如其他选择器常见。
p[lang|="en"] {
/* 选择lang属性值以"en"开头(可能后跟"-")的元素,但实际应用中较少见 */
}
注意:|分隔符的使用主要是为了处理语言代码,如en-US,它表示美国英语。然而,在CSS中,这种选择器的使用并不广泛,且主要被设计为与lang属性一起使用。
属性选择器还可以与伪类选择器结合使用,以实现更复杂的样式效果。
input[type="checkbox"]:checked + label {
/* 选择所有与已选中的checkbox相邻的label元素 */
font-weight: bold;
}