一、CSS的4种引入方式
1. 内联式
```
Egon是一个非常了不起的人
```
2. 嵌入式
```html
```
3. 导入式
```html
```
4. 外联式(企业开发中使用这种方式)
```html
```
注意：导入式会在整个网页装载完后再装载CSS文件，因此会导致一个问题，如果网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
作用：根据指定的类名，在当前界面中找到对应的所有标签，并设置属性。
格式：.class名 { 属性：值； }
注意点：
1. 在企业开发中，如果仅仅只是为了设置样式，通常不会使用类名。在前端开发中，类名通常是留给CSS使用的。
2. 每个标签都可以设置一个或多个类名，类名相当于标签的别名。因此在同一界面内，类名可以重复。
3. 引用类名时，需要在类名前加上"."。
4. 类名的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是HTML关键字如p、a、img等。
## 在CSS中使用类名设置样式
在CSS中，我们可以使用`.类名称`来选择特定的元素并为其设置样式。这是一种非常有用的功能，可以帮助我们根据需要定制页面上的各个元素的外观和行为。下面是关于如何使用类名设置样式的一些说明：
### 语法格式
在CSS中，要为指定的类名设置样式，需要使用以下语法格式：
```css
.类名称 {
属性：值；
}
```
其中，“.”表示类选择器，用于选择具有指定类名的元素；“类名称”是指你要应用样式的那个类名；“属性：值”表示你要设置的CSS属性及其对应的值。
### 注意点
在使用类名设置样式时，需要注意以下几点：
1. 类名是专门用来给某个特定的标签设置样式的。你可以在一个HTML文档中为同一个标签设置多个类名(用空格分隔),这样就可以实现对这个标签的不同样式设置。
2. 每个标签都可以设置一个或多个class,它们相当于人/标签的名称。因此，在同一个界面内，class可以重复。
3. 引用class时一定要加上“.”，否则无法正确选择元素。
4. 类名的命名规则与id的命名规则相同，通常采用小写字母、数字、下划线组成，但不能以数字开头。
```html
大多数人的帅，都是浮在表面的，是外表的帅
而EGON,不仅具备外表帅，内心更是帅了一逼
EGON就是我，我就是EGON
```
练习：第一行与第三行的颜色都是红色，第一行与第二行的字体大小都是50px,第二行与第三行内容有个下划线。
```html
第一行内容
第二行内容
第三行内容
```
在CSS中，我们可以使用多种选择器来选择和设置HTML元素的样式。其中，`class`选择器用于根据元素的类名来设置样式，而`*`通配符选择器则可以匹配任何元素。
1. `class`选择器：通过指定元素的类名，可以选择并设置该类名下所有元素的样式。例如，如果我们有一个类名为`.rr`的元素，我们可以通过以下方式设置其样式：
```css
.rr {
color: red;
}
```
这将使得所有具有`.rr`类名的元素的文字颜色变为红色。
2. 标签选择器：标签选择器可以根据指定的HTML标签名称来选择元素。例如，如果我们想要选择所有的段落(`
`)元素，我们可以使用以下代码：
```css
p {
color: red;
}
```
这将使得所有的段落元素的文字颜色变为红色。需要注意的是，标签选择器只能选择当前页面中的元素，不能单独选中某一特定标签。
3. `*`通配符选择器：`*`通配符选择器可以匹配任何元素。例如，如果我们想要设置所有元素的字体大小为16px,我们可以使用以下代码：
```css
* {
font-size: 16px;
}
```
这将使得当前页面中的所有元素的字体大小都变为16px。
## 1、后代选择器
#### 1、作用
- **找到指定标签的所有后代(儿子，孙子，重孙子、、、)标签**;
- **设置属性**。
#### 2、格式
```css
标签名1 xxx {
属性：值；
}
```
#### 3、注意点
- **在企业开发中一般不会使用通配符选择器**。理由是：由于通配符选择器是设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签。如果当前界面上的标签比较多，那么性能就会比较差。
- **后代选择器必须用空格隔开**。
- **后代不仅仅是儿子，也包括孙子、重孙子**。
- **后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class**。
- **后代选择器可以通过空格一直延续下去**。
我是body下的段落1
我是body下的段落2
子元素选择器在HTML的样式表CSS中起着重要的作用。它可以让你精确地定位到HTML文档中的特定标签的所有直接子元素，并对其进行属性设置。子元素选择器也被称为后代选择器。
1. 子元素选择器的定义：通过使用">"符号，我们可以选择指定标签的所有直接子元素。例如，">p"将选择所有直接子元素为
标签的元素。
2. 示例代码：
```css
#1、作用：找到制定标签的所有特定的直接子元素，然后设置属性
#2、格式： 标签名1>标签名2 { 属性：值； }
先找到名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素
#3、注意：
1、子元素选择器之间需要用>符号链接，并且不能有空格
比如div >p会找div标签的所有后代标签，标签名为“>p”
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器，比如id或class
4、子元素选择器可以通过>符号一直延续下去
```
以上就是关于CSS中子元素选择器的基本解释和使用方法。
我是body下的段落1
我是body下的段落2
您好！根据我的搜索结果，子元素选择器是指选择某个元素的子元素，而空格表示后代选择器。在您的代码中，p标签不能嵌套其他标签，否则css样式选择会出错。因此，您需要将p标签中的.r2+div改为.r2>div。这样就可以避免出现错误了。
相邻兄弟选择器 #1作用：选定紧跟其后的那个标签
#2、格式
选择器1+选择器2 {
属性：值；
}
#3、注意点：
1、毗邻选择器必须通过+号链接
2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
--------------------------------------------------------------------
兄弟选择器 #1
作用：给指定选择器后面的所有选择器中的所有标签设置属性
#2、格式：
选择器1~选择器2 {
属性：值；
}
#3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签，无论有没有被隔开，都可以被选中。
相邻兄弟选择器(+)可以选择紧接在另一个元素后的元素，且二者具有相同的父元素。通用兄弟选择器(~)可以选择所有后代元素，不分层级。
例如，以下代码将会选中第一个p标签和第二个p标签：
```html
hello 2
hello 3```
而以下代码将会选中所有的p标签：
```html
hello 2
hello 3```
我是标题1
有了这个标签，p就不再是紧跟h1标签了，但通用兄弟选择器仍然能选中
我是段落
我是段落
我是段落
我是段落
我是段落
我是段落
我是段落
我是段落
我是段落
我是标题2
我是段落
哈哈啊
我是段落1
我是段落2
我是段落3
我是段落
我是段落
我是段落
您好！序列选择器是CSS中的一种选择器，用于选择同级别的元素。例如，:first-child 选择器可以选中同级别标签中的第一个标签。注意点：不区分类型(任何标签类型都可以使用)。
在这个例子中，我们有5个段落，我们想要将第一个段落的字体颜色设置为红色，可以使用以下代码：
```html
``` ```css p:first-child { color: red; } ``` 在CSS3中，新推出的9个选择器被广泛应用，它们也被称为序列选择器。相较于过去的选择器，这些新的选择器更加强大和灵活。下面我们将详细解析这9个最具代表性的选择器，并通过一些实例来展示它们的用法。 1. **:first-child 和 p:first-child** :这两个选择器分别表示同级别的第一个元素。例如，如果我们想选择页面上所有的` `标签的第一个子元素，我们可以使用`.p:first-child`。 ```css p:first-child { border: 1px solid red; } ``` 2. **:last-child 和 p:last-child** :这两个选择器与上面的类似，表示同级别的最后一个元素。例如，如果我们想选择页面上所有的` `标签的最后一个子元素，我们可以使用`.p:last-child`。 ```css p:last-child { border: 1px solid blue; } ``` 3. **:nth-child(n)** :这个选择器可以表示同级别的第n个元素。例如，如果我们想选择页面上所有的` `标签的第二个子元素，我们可以使用`.p:nth-child(2)`。 ```css p:nth-child(2) { border: 1px solid green; } ``` 4. **:nth-last-child(n)** :这个选择器可以表示同级别的倒数第n个元素。例如，如果我们想选择页面上所有的` `标签的第四个子元素，我们可以使用`.p:nth-last-child(4)`。 ```css p:nth-last-of-type(4) { border: 1px solid yellow; } ``` 5. **:only-of-type 和 p:only-of-type** :这两个选择器表示同类型的唯一一个元素。例如，如果我们只想选择页面上所有唯一的` `标签，我们可以使用`.p:only-of-type`。 ```css p:only-of-type { border: 1px solid purple; } ``` 6. **:only-child**
我是标题1
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5
我是段落6
我是标题2
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5
六、属性选择器
1)属性选择器的概念
#1、作用：根据指定的属性名称找到对应的标签，然后设置属性。该选择器最常用于input标签。
#2、格式与具体用法：
- [属性名]:表示选择具有指定属性的元素。例如，[class]表示选择具有class属性的所有元素。
- 其他选择器[属性名]:表示在其他选择器的基础上再添加一个或多个属性条件。例如，p[id]表示选择所有包含id属性的p标签。
- [属性名=值]:表示选择具有指定属性且属性值等于给定值的元素。例如，p[class="part1"]表示选择所有class属性值为part1的p标签。
- [属性名^=值]:表示选择具有指定属性且属性值以给定值开头的元素。例如，a[href^="https"]表示选择所有href属性值以https开头的a标签。
- [属性名$=值]:表示选择具有指定属性且属性值以给定值结尾的元素。例如，img[src$="png"]表示选择所有src属性值以png结果的img标签。
- [属性名*=值]:表示选择具有指定属性且属性值包含给定值的元素。例如，[class*="part"]表示选择所有class属性值中包含part2的标签。
哈哈啊
我是段落
我是段落
我是段落
我是段落
我是段落
以下是根据您提供的重构后的代码：
3. 属性名必须有一个是girl的自定义属性[],也可以[user~="girl"]。
```html
```
您好！CSS 伪类选择器是一种特殊的选择器，用于选择元素的特定状态。常用的伪类有：hover、active、visited、focus、blur 等 。其中，hover 伪类用于选择鼠标悬停在元素上时的样式；active 伪类用于选择已访问和未访问链接设置不同的样式；visited 伪类用于设置已访问链接的样式；focus 伪类用于设置元素获得焦点时的样式；blur 伪类用于设置元素失去焦点时的样式 。
您可以根据需要使用这些伪类来为网页添加各种特殊效果。例如，如果您想让一个按钮在鼠标悬停时变大，可以使用 hover 伪类来实现。具体实现方法可以参考以下代码：
```css
button:hover {
transform: scale(1.1);
}
```
伪类选择器是CSS中的一种特殊选择器，用于控制链接的显示效果。以下是常用的几种伪类选择器的定义和样式设置：
1. 没有访问过的超链接a标签样式：
```css
a:link {
color: blue;
}
```
2. 访问过的超链接a标签样式：
```css
a:visited {
color: gray;
}
```
3. 鼠标悬浮在元素上应用样式：
```css
a:hover {
background-color: #eee;
}
```
4. 鼠标点击瞬间的样式：
```css
a:active {
color: green;
}
```
5. input输入框获取焦点时样式：
```css
input:focus {
outline: none;
background-color: #eee;
}
```
注意：
1. a标签的伪类选择器可以单独出现，也可以一起出现。例如：`a:link`, `a:visited`, `a:hover`, `a:active`。
2. a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效。正确的顺序为：`link`, `visited`, `hover`, `active`。
3. hover是所有其他标签都可以使用的。