css: 基础选择器

基础选择器包括 ID 选择器、类选择器、标签选择器、通配符选择器和属性选择器这几种。

一、ID 选择器

Tips：
1、ID 选择器只能对一个元素生效，同一个页面里不允许出现两个 ID 相同的元素。
2、理论上 ID 选择器是效率最高的选择器。但是由于它只能选一个元素，特异性太高，在实际开发中也很少在 CSS 里使用 ID 选择器。
3、也正是因为 ID 选择器特异性高，所以在 JS 里使用 ID 选择器的比较常见。

二、类选择器

Tips：
1、类选择器的效率也是不错的，和 ID 选择器并不会有太大的差异。所以在写 CSS 的时候，比较推荐用类选择器。
2、类选择器会选择到所有类名相同的 DOM 元素，没有数量限制。
3、类选择器应该是样式开发中应用最多的选择器。

三、通配选择器

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

*{
    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 实现也一样要耗费资源的。