CSS 基础选择器 _CSS

文章插图

css 选择器是用来指定该组 CSS 样式会对什么元素生效的，是连接 html 结构和 CSS 样式的桥梁。这一篇将给大家介绍一下 CSS 里基础选择器的用法，同时会对使用上给出一些建议。
基础选择器包括 ID 选择器、类选择器、标签选择器、通配符选择器和属性选择器这几种。
ID 选择器
ID 选择器是用 “#” 号加 ID 名称 xxx 来表示，用来选择 HTML 中 id="xxx" 的 DOM 元素。我们以选择下面这个 ID 为 content 的元素为例：
<div id="content">我是id选择器需要选中的元素</div>当我们想把样式应用到这个元素的时候，就可以用下面的 ID 选择器：
#content{ color: #fff; background: #000;}这样 ID 为 content 的元素就会有一个黑底白字的效果了。在 ID 选择器中，有几点要注意：
1、ID 选择器只能对一个元素生效，同一个页面里不允许出现两个 ID 相同的元素。2、理论上 ID 选择器是效率最高的选择器。但是由于它只能选一个元素，特异性太高，在实际开发中也很少在 CSS 里使用 ID 选择器。3、也正是因为 ID 选择器特异性高，所以在 JS 里使用 ID 选择器的比较常见。
类选择器
类选择器是用 “.” 加上 class 名称来表示，用来选择 HTML 中 class="xxx" 的 DOM 元素。我们以选择下面 class 名称为 list-item 的元素为例：
<ul> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li> <li class="list-item"></li></ul>当我们想把样式应用到列表里每一条元素的时候，就可以用类选择器：
.list-item{ border-bottom: 1px solid #ccc;}这样列表里所有的项就都有一个宽 1px 灰色的下边框了。
在类选择器中，要注意以下几点：
1、类选择器的效率也是不错的，和 ID 选择器并不会有太大的差异。所以在写 CSS 的时候，比较推荐用类选择器。2、类选择器会选择到所有类名相同的 DOM 元素，没有数量限制。3、类选择器应该是样式开发中应用最多的选择器。
【CSS 基础选择器】通配选择器
通配选择器使用星号来选择到页面里所有元素。用法如下：
*{ margin: 0; padding: 0;}上面这个样式就是把所有元素的内外边距都归零。由于通配选择器要把样式覆盖到所有的元素上，可想而知它的效率并不会高，所以在实际开发中一般不建议使用通配选择器。
标签选择器
标签选择器的作用是选中 HTML 中某一种类的标签，它直接使用 HTML 中的标签名作为选择器的名称。比如我们需要把页面里所有大标题的字号都调成 20px，就可以用标签选择器来实现：
h1{ font-size: 20px;}

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

属性选择器
属性选择器比较好理解，就是通过 DOM 的属性来选择该 DOM 节点。属性选择器是用中括号 “[]” 包裹，比如选择所有带有 href 属性的标签，就可以使用这样的选择器:
a[href]{ color: red;}这条选择器就可以让所有带 href 属性的 a 标签字体都变成红色。属性选择器有如下几种形式：
[attr]，用来选择带有 attr 属性的元素，如刚提到的 a [href] 。
<a href=https://www.isolves.com/it/cxkf/yy/CSS2/2019-10-09/"/">返回主页// 下面的CSS会使所有带href的a标签字体变红色：a[href]{ color: red;}[attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素，如选择所有文本类型的输入框，可以用 input [type=text] 。
<input type="text" value=https://www.isolves.com/it/cxkf/yy/CSS2/2019-10-09/"大花碗里扣个大花活蛤蟆"/>// CSS：input[type=text]{ color: red;}这个选择器里面要注意，xxx 和 HTML 中的属性值必须完全相等才会生效。
<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” 的元素，如果非要用这种选择器，必须使用 input [class=“input text”] 才可以。
[attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素，但一定是逗号分隔的多个值中有一个能和 xxx 相等才行。