CSS选择器

CSS选择器

1.介绍

1.1.什么是CSS选择器

​ CSS选择器是一种用于选择特定HTML元素并且将样式应用于这些元素的模式。CSS选择器允许我们通过指定的元素的属性，关系，状态等来选择元素，以便于有针对性地应用样式

1.2.为什么使用CSS选择器

​ (1)CSS选择器可以提高样式的复用性:通过使用不同的选择器，将不同的样式规则用于多个元素减少代码的冗余

​ (2)CSS选择器可以简化样式的维护:CSS选择器可以使样式的修改比直接使用行内样式的更加方便，不必对每一处样式都进行重复的修改。

​ (3)改善文档结构和代码可读性:使用CSS选择器可以将样式与HTML代码结构分离，使得HTML代码更加简洁和易于理解，更易于团队协作和维护

1.3.CSS选择器的基础语法

CSS选择器的基础语法由选择器和声明部分组成。

(1)选择器:是指定要选择的HTML元素或者是元素组

(2)声明部分:声明部分就是由花括号({})包含样式规则。在声明部分中，可以定义一个或者多个样式规则(样式规则由属性和值组成)

2.基本选择器

2.1.标签选择器

标签选择器（Tag Selector）是CSS选择器的基本类型之一，它通过HTML元素的标签名称来选择元素

基本语法：

tagName {声明块}

基本示例：

`基本示例：`

`/* 选择所有的段落 <p> 元素 */`
`p {`
  `color: blue;`
  `font-size: 16px;`
`}`

`/* 选择所有的标题 <h1> 元素 */`
`h1 {`
  `color: red;`
  `font-size: 24px;`
`}`

`/* 选择所有的 div 元素 */`
`div {`
  `background-color: yellow;`
  `padding: 10px;`
`}`

2.2.类选择器

类选择器（Class Selector）是CSS选择器的一种类型，用于选择具有相同类别（class）的HTML元素。通过类选择器，可以为一组具有相同类别的元素定义相同的样式规则。

基本语法：

.className{声明部分}

基本示例：

/* 定义类选择器 */
.my-class {
  color: red;
  font-size: 16px;
}

/* 应用类选择器 */
<p class="my-class">这是一个红色的段落。</p>
<div class="my-class">这是一个红色的 div。</div>

2.3.ID选择器

ID选择器（ID Selector）是CSS选择器的一种类型，用于选择具有唯一标识符（ID）。每个HTML元素只有有一个唯一的ID,因此ID选择器只可以选择一个特定的元素。

基本语法：

#idName{声明部分}

基本示例：

/* 定义ID选择器 */
#my-id {
  color: blue;
  font-size: 20px;
}

/* 应用ID选择器 */
<div id="my-id">这是一个蓝色的 div。</div>
<p id="my-id">这是一个蓝色的段落。</p>

2.4通配符选择器

通配符选择器（Universal Selector）是CSS选择其中的一种类型，他可以匹配HTML中的所有元素。通配符一般是对HTML的默认格式进行清除。

基本语法：

*{声明部分}

基本示例：

/* 应用通配符选择器 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

​

2.5属性选择器

属性选择器（Attribute Selector）是CSS选择器的一种类型，用于选择具有特定的属性或者属性值的HTML元素。属性选择器可以根据元素的属性来选择元素，从而对其应用相应的样式规则

基本语法1：选择具有特定属性的元素

[attribute] {
/* styles */
}

基本语法2：选择具有特定属性和值的元素

[attribute=value] {
/* styles */
}

基本语法3：选择具有特定属性和以某个值开头的元素

[attribute^=value] {
/* styles */
}

基本语法4：选择具有某个特定属性或者以某个值结尾的元素

[attribute$=value] {
/* styles */
}

基本语法5：选择具有特定属性和包含某个值的元素

[attribute*=value] {
/* styles */
}

3组合选择器

3.1.后代选择器

后代选择器（Descendant Selector）是CSS选择器的一种类型，用于选择指定元素的后代元素。后代选择器通过指定父元素和子元素之间的关系，选择在父元素内的特定子元素。

后代选择器使用空格（’ '）来表示父元素和子元素之间的关系。

parent descendant {
  /* styles */
}

其中，parent是父元素的选择器，descendant是子元素的选择器。

以下是一个示例：

/* 后代选择器 */
div p {
  color: blue;
  font-size: 16px;
}

3.2.子代选择器

子代选择器（Child Selector）是CSS选择器的一种类型，用于选择指定元素的直接子元素。子代选择器通过指定父元素和子元素之间的关系，选择在父元素内作为直接子元素的特定子元素。

子代选择器使用大于号（>）来表示父元素和子元素之间的关系。

parent > child {
  /* styles */
}

其中，parent是父元素的选择器，child是直接子元素的选择器。

以下是一个示例：

/* 子代选择器 */
ul > li {
  color: red;
  font-size: 14px;
}

3.3.相邻兄弟选择器

相邻兄弟选择器（Adjacent Sibling Selector）是CSS选择器的一种类型，用于选择紧接在指定元素后面的兄弟元素。相邻兄弟选择器选择的兄弟元素必须紧接在指定元素的后面，且二者具有相同的父元素。

相邻兄弟选择器使用加号（+）来表示前后关系。

element1 + element2 {
  /* styles */
}

其中，element1是前一个兄弟元素的选择器，element2是紧接在其后面的兄弟元素的选择器。

以下是一个示例：

/* 相邻兄弟选择器 */
h2 + p {
  color: blue;
  font-size: 16px;
}

3.4通用兄弟选择器

通用兄弟选择器（General Sibling Selector）是CSS选择器的一种类型，用于选择指定元素后面的所有兄弟元素，而不仅仅是紧邻的兄弟元素。通用兄弟选择器选择的兄弟元素与指定元素具有相同的父元素。

通用兄弟选择器使用波浪号（~）来表示前后关系。

element1 ~ element2 {
  /* styles */
}

其中，element1是前一个元素的选择器，element2是位于其后面的兄弟元素的选择器。

以下是一个示例：

/* 通用兄弟选择器 */
h2 ~ p {
  color: blue;
  font-size: 16px;
}