属性选择器往往是我们所忽略的一个选择器。但它其实很强大,下面我们来认识一下
<form>
<input type="text">
<div>
<input type="password">
</div>
</form>
用法
[type] {
width: 300px;
}
这样,我们就选中 form 表单里的两个 input 了
是不是很方便?
其他用法1
[type="password"] {
width: 300px;
}
这样的话,就只有 type 是 password 类型的 input 元素才会应用这个样式~
其他用法2
/* 匹配类名中包含指定值的元素 */
[type*="value"]
/* value 是一个类名 */
比如说:
class = “aa value” 和 class = “aa_value” 的元素就都可以被匹配到,
只要是类名中有 value 或者是带 value 的类名就可以;
其他用法3
/* 用于选取类名中包含指定类名的元素 */
[type~="value"]
/* value 是一个类名 */
这种用法就只有 class = “aa value” 的元素才能匹配到了
类名里有 value 的元素可以匹配到;
以上