详解css常用选择器

下面是详解 CSS 常用选择器的完整攻略：

一、CSS 选择器简介

在 CSS 中，选择器用来指定我们要样式化的 HTML 元素。CSS 选择器有很多种，它们各自拥有不同的特点和用法。在本文中，我们将详解 CSS 中常用的选择器类型。

二、CSS 基本选择器

1. 元素选择器

元素选择器是指通过元素名称来选择它所作用的 HTML 元素。例如：

p {
    color: red;
}

这将会把所有 <p> 标签的文本颜色设置为红色。

2. ID选择器

ID 选择器是指通过 ID 名称来选择 HTML 元素。ID 属性是页面中唯一的，所以一个 ID 选择器只能匹配一个元素。例如：

#header {
    background-color: #333;
}

这将会把 ID 为 "header" 的元素的背景颜色设置为黑色。

3. 类选择器

类选择器是指通过为 HTML 元素添加一个 class 属性来选择元素。例如：

.my-class {
    text-align: center;
}

这将会把所有 class 属性为 "my-class" 的 HTML 元素的文本居中对齐。

三、CSS 高级选择器

1. 子选择器

子选择器是指通过父子关系来选择 HTML 元素。例如：

ul > li {
    color: blue;
}

这将会把所有 <ul> 标签下的直接子元素 <li> 的文本颜色设置为蓝色。

2. 属性选择器

属性选择器是指通过属性名来选择 HTML 元素。例如：

a[href="https://www.baidu.com"] {
    color: green;
}

这将会把所有 href 属性为 https://www.baidu.com 的链接文本颜色设置为绿色。

四、总结

以上就是常见的一些 CSS 选择器类型，我们可以根据不同的需求选择不同的选择器类型来获取页面元素并进行样式设置。熟练掌握 CSS 选择器将有助于您更好地掌握 CSS 的使用。

示例一：如果我们要选择编辑器中的所有标题（即HTML元素\

到\

），可以使用以下代码：

h1, h2, h3, h4, h5, h6 {
    color: red;
}

示例二：如果我们要选择文章列表中的第一个列表项，并为它设置一个特别的样式，可以使用以下代码：

ul li:first-child {
    font-weight: bold;
}