CSS 基础选择器( 二 ) _CSS

<input class="input text" type="text" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-10-09/"大花碗里扣个大花活蛤蟆"/>// CSS：input[class~=input]{ color: red;}在上面的例子中，使用 input [class~=input] 就可以选中 class=“input text” 的元素了。
[attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素，比较常用的场景是选择某一类的属性。
<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 开头都可以。
<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 结尾的元素。
<button class="btn btn-disabled">禁用的按钮</button><select class="select select-disabled city-select"></select><input class="input input-disabled" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-10-09/"禁用的输入框"/>// CSS：[class$=disabled]{ display: none;}上面的例子中，我们想把页面里有禁用标识的所有元素都隐藏掉，就可以使用 [class$=disabled] 来选择所有 class 里以 disabled 结尾的元素。这么用的前提是提前约定好，disabled 相关的类要放在最后，否则就像上面的 select 一样不会生效。
[attr*=xxx]，最后一个，这个是用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素。这个选择器的规则算是最宽泛的，只要 xxx 是元素属性值的子字符串，这个选择器就会生效。
<button class="btn btn-disabled">禁用的按钮</button><select class="select select-disabled city-select"></select><input class="input input-disabled" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-10-09/"禁用的输入框"/>// 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 实现也一样要耗费资源的。

总结
这一篇我们讲了 CSS 里几种基础的选择器，包括 ID 选择器、类选择器、标签选择器、通配符选择器和属性选择器。这几个选择器里面最常用的就是类选择器，最灵活的是属性选择器，而 ID 选择器、标签选择器和通配选择器的应用场景都不多。