博客

属性选择器往往是我们所忽略的一个选择器。但它其实很强大，下面我们来认识一下

<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 的元素可以匹配到；

以上