属性选择器

[attr]

匹配包含指定属性的元素

1. 注意点：disabled

• 只要有 disabled 属性，则文本框就会被禁用，而无关值是什么，所以可以直接用属性选择器来匹配被禁用的选择框

  [disabled] {}

2. 注意点：checked

[checked] 选择器是不可控的，请使用 :checked 伪类

• 在 IE7 使用 [defaultChecked] 代替 [checked]

• JS 不会同步修改 checked 属性的值

  <!-- 假设有如下标签 -->
  <input checked disabled />

  // 使用 JS 修改文本框状态
  input.checked = false;
  input.disabled = false;

  <!-- 会变成 -->
  <input checked />

[attr="val"]

匹配以 attr 命名的属性，且属性值为 val 的元素的元素

1. 特点

• 不区分单引号和双引号
• 引号可以省略，但是如果属性值包含空格，则还是需要引号

[attr~="val"]

匹配以 attr 命名的属性，且属性值包含 value 单词的元素

1. 单词：以空格区分属性值

<div class="left top"></div>

/* 以下选择器可匹配上面元素 */
[class~="left"] {}
[class~="top"] {}

/* 这个选择器匹配不了 */
[class~="le"] {}

[attr|="val"]

匹配以 attr 命名的属性，且属性值以 val 开头，- 连接的元素

主要用于区分语言（zh-xxx， ch-xxx），一般不使用

[attr^=value]

以 attr 命名的属性，且属性值是以 value 开头的元素

1. 实用 i 或者 I 作为运算符时，忽略大小写

[attr^="val" i] {}

2. 实用：判断 a 元素的链接地址类型

[href^="http"]
[href^="ftp"]
[href^="tel"]

[attr$=value]

以 attr 命名的属性，且属性值是以 value 结尾的元素

1. 实用 i 或者 I 作为运算符时，忽略大小写

[attr$="val" i] {}

2. 实用：判断 a 元素的链接文件类型

[href$=".pdf"]
[href$=".zipi"]

[attr*=value]

以 attr 命名的属性，且属性值至少包含一个 value 值的元素

1. 实用 i 或者 I 作为运算符时，忽略大小写

[attr*="val" i] {}

2. 实用：控制参与 JS 交互的元素

[style*="display: none"] {}

细节：

1. 通过 JS 设置的样式，会有一个美化的空格

   <div style="display: none;"></div>

2. 但是手写的话，则会按照手写的字符匹配