CSS常见选择器

LG.田猿2024-02-28 23:49

在Web开发中，层叠样式表（CSS）是用于描述HTML或XML（包括SVG和XHTML等其他XML语言）文档的样式的语言。CSS描述了文档的表现形式，包括布局、颜色和字体等。在CSS中，选择器是一种模式，用于选择需要添加样式的元素。以下是一些常见的CSS选择器。

元素选择器是最基本的选择器，它匹配HTML元素的类型名称。例如，p选择器将匹配所有的<p>元素。

css 复制代码

p {
    color: red;
}

类选择器匹配HTML元素的类属性。类选择器以.开始。例如，.myClass选择器将匹配所有类名为myClass的元素。

css 复制代码

.myClass {
    color: blue;
}

ID选择器匹配HTML元素的ID属性。ID选择器以#开始。例如，#myID选择器将匹配所有ID为myID的元素。

css 复制代码

#myID {
    color: green;
}

属性选择器匹配具有特定属性的HTML元素。例如，[target]选择器将匹配所有具有target属性的元素。

css 复制代码

[target] {
    color: yellow;
}

伪类选择器允许你样式化链接的状态，例如未访问的链接、已访问的链接、鼠标悬停在链接上时等。例如，:hover选择器将匹配鼠标悬停在其上的元素。

css 复制代码

a:hover {
    color: purple;
}

组合选择器允许你同时选择多个元素。你可以使用,来分隔每个选择器。例如，p, li选择器将匹配所有的<p>和<li>元素。

css 复制代码

p, li {
    color: orange;
}

选择作为另一个元素后代的元素。

css 复制代码

div p {
    text-align: center;
}

选择作为另一个元素直接子元素的元素。

css 复制代码

ul > li {
    list-style-type: circle;
}

选择紧接在另一个元素后的兄弟元素。

css 复制代码

h2 + p {
    margin-top: 10px;
}

*将匹配所有元素。

css 复制代码

* {
    box-sizing: border-box;
}