选择器知识大全，助您快速掌握CSS！

作为前端工程师，css是不可或缺的基础技能之一。而选择器作为CSS的基础，它的使用将直接影响我们的页面美观和性能。今天，我们将一起来深入学习CSS选择器。

一、基础选择器

1. 元素选择器

元素选择器也是最常用的基础选择器，通过元素名称来选择元素。比如我们要选择全部p标签，可以使用p选择器，代码为：

``` p { color: #555; } ```

2. 类选择器

类选择器用于选择一个或多个拥有相同class的元素，比如我们选中一个class为“wrapper”的div标签，代码如下：

``` .wrapper { width: 80%; margin: 0 auto; } ```

3. ID选择器

ID选择器用于匹配ID属性的元素。要选择一个id为“header”的标签，代码如下：

``` #header { height: 100px; } ```

二、组合选择器

1. 后代选择器

后代选择器用于选择一个元素内部的子元素。比如我们要选择class为“navi”的元素内的所有a标签，代码如下：

``` .navi a { color: #555; } ```

2. 子选择器

子选择器只会选择子元素，而不会选择孙子元素。比如要选中div中的直接子元素p标签，代码如下：

``` div > p { font-size: 16px; } ```

3. 相邻兄弟选择器

相邻兄弟选择器用于选择与指定元素相邻的同级元素。比如选择p标签后紧跟的div标签，代码如下：

``` p + div { margin-top: 20px; } ```

4. 通用兄弟选择器

与相邻兄弟选择器相比，通用兄弟选择器可以选择任意一个同级元素。比如要选择p标签后所有的div标签，代码如下：

``` p ~ div { color: #999; } ```

三、属性选择器

属性选择器可以通过元素的属性来选择元素。常见的有以下三种：

1. 属性选择器

属性选择器可以通过元素属性的完全匹配来选择元素。比如要选择所有title属性为“about”的a标签，代码如下：

``` a[title="about"] { color: blue; } ```

2. 子串匹配属性选择器

子串匹配属性选择器可以通过元素属性包含某个字符串来选择元素。比如要选中class中包含“content”的元素，代码如下：

``` [class*="content"] { background-color: #f5f5f5; } ```

3. 后缀匹配属性选择器

后缀匹配属性选择器可以通过元素属性以某个字符串结尾来选择元素。比如要选择所有href属性以“.html”结尾的a标签，代码如下：

``` a[href$=".html"] { text-decoration: underline; } ```

四、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。常见的有以下几种：

1. 链接伪类

链接伪类包括：a:link、a:visited、a:hover、a:active。比如设置a标签在鼠标悬停时的样式，代码如下：

``` a:hover { color: red; } ```

2. 目标伪类

目标伪类用于选取事先在文档中指定了id的特定元素。比如选中id为“section2”的div元素，代码如下：

``` #section2:target { background-color: yellow; } ```

3. 表单伪类

表单伪类包括：input:focus、input:enabled、input:disabled、checkbox:checked、radio:checked。比如选中鼠标聚焦在input标签上时的样式，代码如下：

``` input:focus { background-color: #f5f5f5; } ```

五、总结

通过学习CSS选择器，我们可以更容易地选取和控制页面中的元素，让我们的页面变得更加美观和易于维护。选择器只是CSS的一个方面，它能进行如此多的操作，实在是令人惊叹。相信对于选择器的掌握，可以让我们的前端工作更加得心应手！