css: 基础选择器

通配选择器使用星号来选择到页面里所有元素。用法如下：

*{
    margin: 0;
    padding: 0;
}

上面这个样式就是把所有元素的内外边距都归零。由于通配选择器要把样式覆盖到所有的元素上，可想而知它的效率并不会高，所以在实际开发中一般不建议使用通配选择器。

四、标签选择器

Tips： 标签选择器通常用来重置某些标签的样式，标签选择器的效率也不是很高，但要好过通配选择器。

五、属性选择器

属性选择器比较好理解，就是通过 DOM 的属性来选择该 DOM 节点。属性选择器是用中括号 “[]” 包裹，比如选择所有带有 href 属性的标签，就可以使用这样的选择器:

a[href]{
    color: red;
}

这条选择器就可以让所有带 href 属性的 a 标签字体都变成红色。

属性选择器有如下几种形式：

• [attr]，用来选择带有 attr 属性的元素，如 a [href]。

<!-- HTML： -->
<a href="/">返回主页</a>

// 下面的CSS会使所有带href的a标签字体变红色：
a[href]{
    color: red;
}

• [attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素，如选择所有文本类型的输入框，可以用 input [type=text]。

<!-- HTML： -->
<input type="text" value="大花碗里扣个大花活蛤蟆"/>

// CSS：
input[type=text]{
    color: red;
}

这个选择器里面要注意，xxx 和 HTML 中的属性值必须完全相等才会生效

<!-- HTML： -->
<input class="input text" type="text" value="大花碗里扣个大花活蛤蟆"/>

// CSS：
input[class=input]{
    color: red;
}

上面例子中 input [class=input] 的选择器并不能选中 class=“input text” 的元素，如果非要用这种选择器，必须使用 input [class=“input text”] 才可以。

• [attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素，但一定是空格分隔的多个值中有一个能和 xxx 相等才行。

在上面的例子中，使用 input [class~=input] 就可以选中 class=“input text” 的元素了

• [attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素，比较常用的场景是选择某一类的属性。

<!-- HTML： -->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-开头的</div>

// CSS：
div[class|=article]{
    color: red;
}

上面的选择器就可以对所有 article 开头的元素生效，包括 class=“article” 的元素。上面的例子中，选择器会对前三条都生效，但不会对第四条生效。

• [attr^=xxx]，这个选择器会匹配以 xxx 开头的元素，实际上就是用正则去匹配属性值，只要是以 xxx 开头都可以。

<!-- HTML： -->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-开头的</div>

// CSS：
div[class^=article]{
    color: red;
}

还是用刚才的例子，如果把选择器换成 div [class^=article]，那么上面四个 HTML 元素都会被选中了。

• [attr$=xxx]，这个选择器和上一个相似，它是用正则匹配的方式来选择属性值以 xxx 结尾的元素。

<!-- HTML： -->
<button class="btn btn-disabled">禁用的按钮</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的输入框"/>

// CSS：
[class$=disabled]{
    display: none;
}

上面的例子中，我们想把页面里有禁用标识的所有元素都隐藏掉，就可以使用 [class$=disabled] 来选择所有 class 里以 disabled 结尾的元素。这么用的前提是提前约定好，disabled 相关的类要放在最后，否则就像上面的 select 一样不会生效。

• [attr*=xxx]，最后一个，这个是用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素。这个选择器的规则算是最宽泛的，只要 xxx 是元素属性值的子字符串，这个选择器就会生效。

<!-- HTML： -->
<button class="btn btn-disabled">禁用的按钮</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的输入框"/>

// CSS：
[class*=disabled]{
    display: none;
}

还是用刚才 disable 的例子，如果我们用 [class*=disabled] 选择器来选择 disabled 元素，就可以不考虑 -disable 属性所在的位置了，它对所有带这个单词的属性都会生效，哪怕是 class=“i-am-a-disabled-element” 的元素都可以。

Tips：

1. 属性选择器要做文本的匹配，所以效率也不会高。
2. 在使用属性选择器时，尽量要给它设置上生效的范围，如果只用了个 [href] 相当于要在所有元素里找带 href 的元素，效率会很低。如果用 a [href] 会好的多，如果用 .link [href] 就更好了。这种组合方式我们在下一节讲解。
3. 属性选择器很灵活，如果能使用 CSS 代替 JS 解决一些需求，可以不用太纠结性能的问题，用 JS 实现也一样要耗费资源的。