引言

今天上前端知识串讲时刚好讲到了css选择器的知识，突然发现自己对这个方面有所遗忘，特地写一篇笔记记录。

CSS选择器简介

CSS（层叠样式表）是一种用于描述网页文档展示方式的标记语言，其中最重要的部分就是选择器。选择器用于标识网页中的元素，并通过设置相应的样式来实现网页设计的需求。本文将详细介绍CSS选择器的各种类型及其用法。

一、基本选择器

1. 元素选择器

元素选择器是最基础的选择器，它通过HTML标签名来选取元素。比如，使用p选择器可以选取所有的段落元素。

 p {
    color: blue;
 }

2. id选择器

id选择器通过元素的id属性来选择特定的元素。在HTML中，每个元素的id属性值是唯一的。

 #myElement {
    background-color: yellow;
 }

3. 类选择器

类选择器通过元素的class属性来选择特定的元素。在HTML中，多个元素可以有相同的class属性值。

 .myClass {
    font-size: 16px;
 }

4. 属性选择器

属性选择器通过元素的属性值来选择特定的元素。常见的属性选择器有下列几种：

[attribute]：选取包含指定属性的所有元素。
[attribute=value]：选取属性值为指定值的元素。
[attribute~=value]：选取属性值中包含指定词汇的元素。

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

二、组合选择器

1. 后代选择器

后代选择器用于选择某个元素的后代元素。它们通过空格分隔，例如，选择.container类中的所有段落元素：

 .container p {
    font-weight: bold;
 }

2. 子元素选择器

子元素选择器用于选择某个元素的直接子元素。它们使用大于号（>)进行分隔，例如，选择列表项的直接子元素：

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

3. 相邻兄弟选择器

相邻兄弟选择器用于选择某个元素之后的相邻兄弟元素。它们使用加号（+）进行分隔，例如，选择某个元素后面的一个相邻的p元素：

 h1 + p {
    color: green;
 }

三、伪类和伪元素选择器

1. 伪类选择器

伪类选择器用于选择元素的特定状态或位置。常见的伪类选择器有下列几种：

:hover：选取鼠标悬停的元素。
:active：选取被点击的元素。
:nth-child(n)：选取某个父元素的第n个子元素。

 a:hover {
    color: red;
 }
 
 li:nth-child(odd) {
    background-color: lightgray;
 }

2. 伪元素选择器

伪元素选择器用于选取元素的特定部分。常见的伪元素选择器有下列几种：

::before：在元素内容之前插入生成的内容。
::after：在元素内容之后插入生成的内容。
::first-line：选取元素的第一行文本。

 p::before {
    content: ">>";
 }
 
 p::first-line {
    font-size: 18px;
 }

CSS选择器优先级

选择器的优先级规则

当多个选择器都匹配同一个元素时，就会出现选择器的优先级问题。CSS 给选择器分配了不同的权重，以决定哪个样式最终会被应用到元素上。

以下是 CSS 选择器优先级的规则：

内联样式：其权重最高，定义在 HTML 元素的 style 属性中。
ID 选择器：通过元素的 ID 进行匹配，如 #header。
类选择器、属性选择器和伪类：包括类选择器、属性选择器和一些特殊的伪类选择器，如 .container、[type='text']、:hover 等。
元素选择器和伪元素：通过元素的标签名进行匹配，如 p、h1，以及一些特殊的伪元素选择器，如 ::before、::after 等。

需要注意的是，内部样式表和外部样式表中的选择器的优先级是相同的。

优先级实例

以下是一些关于选择器优先级的实例：

 <html>
 <head>
 <style>
     /* 内部样式表中的选择器 */
     h1 {
         color: red;
     }
 </style>
 </head>
 <body>
 
 <h1 style="color: blue;">Hello World!</h1> <!-- 内联样式 -->
 
 <p id="id-selector" class="class-selector">Hello</p> <!-- ID、类选择器 -->
 
 </body>
 </html>

在上面的例子中，标题 <h1> 元素会使用内联样式指定的颜色，而段落元素 <p> 则会继承来自 ID 选择器和类选择器的样式。因为 ID 选择器的权重大于类选择器的权重，所以最终 <p> 元素会使用 ID 选择器指定的样式。

避免滥用优先级

尽管了解选择器优先级是很重要的，但我们应该避免滥用它们。过多地使用内联样式、ID 选择器将增加样式表的复杂性和维护成本。在编写 CSS 样式表时，应采用简洁有效的选择器，并且尽量遵循单一职责原则。

css样式选择器回顾 ｜ 青训营

引言