CSS 元素选择器

CSS 元素选择器语法

在 CSS 中，元素选择器指的是根据元素的类型来选择元素。元素选择器会就是选中相同的元素，然后对相同的元素定义同一个 CSS 样式。

语法：

元素名称 {
    ……
}

说明：

元素选择器的语法非常简单，我们直接使用 HTML 元素的标签名称作为选择器即可。例如，p 选择器会选中页面中所有的 p 元素，而 h1 选择器会选中所有的 h1 元素。

CSS 元素选择器

对于元素选择器，小伙伴们要清楚以下几点。

元素选择器会作用于所有匹配的标签，因此可能影响页面中所有同类型元素。我们在使用的时候需谨慎小心，避免意外样式覆盖。
元素选择器的优先级最低，低于 ID 选择器、类选择器和其他高级选择器。具体请参考：CSS 选择器优先级。

CSS 元素选择器示例

接下来，我们通过一个简单的例子来讲解一下 CSS 如何使用元素选择器。

示例：使用 CSS 元素选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { 
            color: red; 
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
    <p>绿叶网</p>
    <span>绿叶网</span>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

CSS 元素选择器示例

分析：

div { 
    color: red; 
}

上面这句代码表示，把页面中所有的 div 元素选中，然后定义它们文本颜色为红色。

CSS 元素选择器就是选择指定的相同的元素，而不会选择其他元素。上面例子中的 p 元素和 span 元素就没有被选中，因此这两个元素文本颜色就没有变成红色。