选择器是 CSS 的核心,用于选择 HTML 元素并应用样式。理解不同类型的选择器及其用法,对于编写有效和可维护的 CSS 非常重要。以下是常见的基本选择器,包括元素选择器、类选择器和 ID 选择器。
基本选择器
元素选择器
元素选择器用于选择 HTML 元素并对其应用样式。它基于元素的标签名称进行匹配。这是最简单且最常用的选择器类型。
语法:
element {
property: value;
}
示例:
/* 选择所有 <p> 元素并设置文本颜色为蓝色 */
p {
color: blue;
}
/* 选择所有 <h1> 元素并设置字体大小为24px */
h1 {
font-size: 24px;
}
解释:
- ‘p‘ 选择器应用于所有 ‘<p>‘ 元素,将其文本颜色设置为蓝色。
- ‘h1‘ 选择器应用于所有 ‘<h1>‘ 元素,将其字体大小设置为 24px。
类选择器
类选择器用于选择具有特定类属性的 HTML 元素。类选择器可以用于多个元素,并且可以在一个页面中复用。类选择器的名称以句点(‘.‘)开头。
语法:
.classname {
property: value;
}
示例:
/* 选择所有具有 class="highlight" 的元素并设置背景色为黄色 */
.highlight {
background-color: yellow;
}
/* 选择所有具有 class="btn" 的元素并设置字体颜色为白色 */
.btn {
color: white;
background-color: blue;
padding: 10px;
border: none;
}
解释:
- ‘.highlight‘ 选择器应用于所有具有 ‘class="highlight"‘ 的元素,将背景色设置为黄色。
- ‘.btn‘ 选择器应用于所有具有 ‘class="btn"‘ 的元素,将字体颜色设置为白色,并且添加了蓝色背景、内边距和无边框样式。
ID选择器
ID选择器用于选择具有特定 ID 属性的 HTML 元素。ID 选择器的名称以井号(‘#‘)开头。每个页面中只能有一个唯一的 ID,因此 ID 选择器应仅用于唯一的元素。
语法:
#idname {
property: value;
}
示例:
/* 选择具有 id="header" 的元素并设置背景色为灰色 */
#header {
background-color: gray;
color: white;
padding: 20px;
}
/* 选择具有 id="main-content" 的元素并设置边距为20px */
#main-content {
margin: 20px;
}
解释:
- ‘#header‘ 选择器应用于具有 ‘id="header"‘ 的元素,将背景色设置为灰色,并设置白色字体颜色和内边距。
- ‘#main-content‘ 选择器应用于具有 ‘id="main-content"‘ 的元素,将其边距设置为 20px。
选择器的优先级
选择器的优先级决定了当多个选择器应用于同一元素时,哪个样式最终生效。CSS 使用以下优先级规则来确定样式的应用:
- ‘内联样式‘:直接在 HTML 元素的 ‘style‘ 属性中定义的样式具有最高优先级。例如:‘<p style="color: red;">‘
- ‘ID 选择器‘:ID 选择器的优先级较高,例如:‘#header‘
- ‘类选择器、属性选择器和伪类‘:这些选择器的优先级较低,例如:‘.btn‘、‘[type="text"]‘、‘:hover‘
- ‘元素选择器和伪元素‘:这些选择器的优先级最低,例如:‘p‘、‘::before‘
CSS示例:
/* ID选择器 */
#header {
color: red;
}
/* 类选择器 */
.highlight {
color: blue;
}
/* 元素选择器 */
p {
color: green;
}
HTML示例:
<p id="header" class="highlight">Hello World</p>
在这个例子中,‘#header‘ 的样式将会生效,因为 ID 选择器具有最高优先级,即使 ‘.highlight‘ 和 ‘p‘ 选择器也试图改变文本颜色。
总结
基本选择器是 CSS 的基础,涵盖了元素选择器、类选择器和 ID 选择器。理解这些选择器及其优先级规则,有助于开发者在样式应用中实现精确控制,并避免样式冲突。选择器的正确使用不仅提高了 CSS 的可维护性,还能有效提升网页的表现力和用户体验。