CSS中常用的选择器，附上案例！

CSS选择器

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css，通过使用 CSS 我们可以大大提升网页开发的工作效率！以下是一些常用的 CSS 选择器以及相应的代码示例：

1. 元素选择器（Element Selector）：

p {
    color: red;
}

此代码将选择所有 <p> 元素，并将它们的文本颜色设置为红色。

2. 类选择器（Class Selector）：

.my-class {
    font-size: 16px;
}

此代码将选择所有具有 class="my-class" 的元素，并将它们的字体大小设置为 16 像素。

3. ID 选择器（ID Selector）：

#my-id {
    background-color: yellow;
}

此代码将选择具有 id="my-id" 的元素，并将它们的背景颜色设置为黄色。

4. 后代选择器（Descendant Selector）：

div p {
    font-weight: bold;
}

此代码将选择所有 <p> 元素，其父元素是 <div> 元素，并将它们的字体加粗。

5. 子元素选择器（Child Selector）：

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

此代码将选择所有直接在 <ul> 元素下的 <li> 元素，并将它们的列表样式设置为圆圈。

6. 属性选择器（Attribute Selector）：

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

此代码将选择所有 type 属性为 “text” 的 <input> 元素，并为它们添加一个灰色边框。

7. 伪类选择器（Pseudo-Class Selector）：

a:hover {
    color: blue;
}

此代码将选择所有鼠标悬停在 <a> 元素上的情况，并将它们的文本颜色设置为蓝色。

8. 伪元素选择器（Pseudo-Element Selector）：

p::before {
    content: ">> ";
    color: green;
}

此代码将在所有 <p> 元素的内容前插入 ">> "，并将其颜色设置为绿色。

9. 相邻兄弟选择器（Adjacent Sibling Selector）：

h2 + p {
    font-style: italic;
}

此代码将选择紧接在 <h2> 元素后的 <p> 元素，并将它们的字体样式设置为斜体。

10. 通用选择器（Universal Selector）：

* {
    margin: 0;
    padding: 0;
}

此代码将选择所有元素，并将它们的外边距和内边距都设置为零，实现重置默认样式的效果。

以上就是css中的选择器，以及一些简单的代码示例。希望会对你有所帮助！记得留个关注哦