跳到主要内容位置

CSS 全体选择器

CSS 全体选择器用来选择全部的元素,适合做一些通用的样式调整,或者对不同的标签,设置统一的样式。

使用方法

CSS 全体选择器使用 * 作为选择器名称,可以选择所有元素,在单独作为选择器进行选择时,会选择 HTML 页面上的所有元素,例如下方代码所示:

<style>
* {
box-sizing: border-box;
font-size: 18px;
color: #888;
}
</style>
<div>
<p>这是一个段落</p>
</div>
<span>测试文本</span>

预览:

这里使用 * 选择了所有的元素:div、p 和 span,然后对它设置了统一的样式,例如文字大小和颜色。

CSS 全体选择器还可以和其它选择器进行组合使用,例如下方代码所示:


<style>
table tbody * {
padding: 12px;
}
</style>

<table>
<thead>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</tbody>
</table>

预览:

示例中的 CSS 选择了 table 下的 tbody 子元素下的所有元素,给它们设置了间距。

小结

CSS 全体选择器用于统一的给一组元素设置样式,也可以和其它选择器组合使用,这样无论它在什么位置,都会选择所有的元素。