要精确地选择特定的元素或元素组来应用样式,可以使用 CSS 选择器。以下是一些常用的 CSS 选择器:
- 元素选择器:通过元素名称选择元素。例如,使用
p
选择所有<p>
元素。
p {
color: blue;
}
- 类选择器:通过类名选择元素。可以在 HTML 元素中使用
class
属性来指定类名,然后在 CSS 中使用.类名
来选择元素。例如,使用.blue-text
选择所有具有类名为 “blue-text” 的元素。
.blue-text {
color: blue;
}
- ID 选择器:通过元素的 ID 属性选择元素。可以在 HTML 元素中使用
id
属性来指定唯一的 ID,然后在 CSS 中使用#ID
来选择元素。例如,使用#header
选择具有 ID 为 “header” 的元素。
#header {
background-color: yellow;
}
- 后代选择器:通过元素的嵌套关系选择元素。可以使用空格将多个选择器组合在一起,表示元素的后代关系。例如,使用
div p
选择所有<div>
元素内的<p>
元素。
div p {
font-size: 20px;
}
- 子元素选择器:通过元素的直接子元素选择元素。可以使用
>
将多个选择器组合在一起,表示元素的直接子元素关系。例如,使用ul > li
选择<ul>
元素中的直接子元素<li>
元素。
ul > li {
list-style: circle;
}
- 属性选择器:通过元素的属性选择元素。可以使用方括号
[]
并在内部指定属性和相应的值来选择元素。例如,使用input[type="text"]
选择所有type
属性值为 “text” 的<input>
元素。
input[type="text"] {
border: 1px solid black;
}
- 伪类选择器:通过元素在特定状态下选择元素。伪类选择器以冒号
:
开头,例如:hover
表示鼠标悬停状态。例如,使用a:hover
选择所有鼠标悬停在链接上的<a>
元素。
a:hover {
text-decoration: underline;
}
这些是一些常用的 CSS 选择器,通过结合使用它们,可以精确地选择特定的元素或元素组来应用样式。