CSS选择器快速入门

CSS选择器的作用

CSS 选择器用于选择你想要的元素的样式的模式。可以用于调节字体，字体宽度大小颜色。例如，可以选择所有的 <p> 标签，并改变它们的颜色；或者选择具有特定类名的元素，应用特定的边距和填充等等。

直接选择指定类型的 HTML 元素。

p {
    color: red;
}

假设 HTML 页面中有多个 <p> 标签，这条 CSS 规则会让所有的 <p> 标签的文字颜色变为红色。

选择具有指定类名的所有元素。

类选择器以 . 开头，后面跟着类别名称。

.example {
    background-color: yellow;
}

假设 HTML 页面中有几个元素都设置了类名 example，这条 CSS 规则会使这些元素的背景色变成黄色。

选择具有指定 ID 的元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

#uniqueId {
    font-size: 20px;
}

假设 HTML 页面中有一个元素设置了 id="uniqueId"，这条 CSS 规则会使这个元素的字体大小变成 20px。

选择具有指定属性或属性值的元素。

input[type="text"] {
    border: 1px solid black;
}

假设 HTML 页面中有几个 <input> 元素，其中一些类型为 text，这条 CSS 规则会使这些输入框的边框变为黑色实线。

通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

div p {
    font-weight: bold;
}

假设 HTML 页面中有一些 <p> 标签位于 <div> 标签内部，这条 CSS 规则会使这些 <p> 标签的文字加粗。

a:hover {
    color: blue;
}

假设 HTML 页面中有多个 <a> 链接，当鼠标悬停在这些链接上时，链接的颜色会变为蓝色。