1. ID 选择器 (#id)
ID选择器用于选择具有特定ID属性的HTML元素。ID在文档中应该是唯一的,因此通过ID选择器可以选择到唯一的元素。
#header {
background-color: #333;
color: white;
padding: 10px;
}
上述例子中,选择了ID为 "header" 的元素,并为其应用了一些样式。在HTML中,对应的元素可能是这样:
<div id="header">这是页面的标题</div>
2. 类选择器 (.class)
类选择器用于选择具有相同类名的HTML元素。一个类可以被多个元素使用,一个元素也可以使用多个类。
.button {
background-color: #3498db;
color: white;
padding: 10px 20px;
}
.highlight {
font-weight: bold;
color: red;
}
在上述例子中,分别选择了类名为 "button" 和 "highlight" 的元素,并为它们应用了相应的样式。在HTML中,对应的元素可能是这样:
<button class="button">点击我</button>
<p class="highlight">这段文字很重要。</p>
注意事项:
- ID选择器以 # 开头,类选择器以 . 开头。
- ID应该在页面中是唯一的,而类可以在多个元素中使用。
- 一个元素可以同时有ID和类。
示例演示了如何使用ID选择器和类选择器,但在实际应用中,选择器可以更复杂,例如使用组合选择器、子选择器等来精确地选择所需的元素。
转载请注明出处:http://www.zyzy.cn/article/detail/3993/CSS