五、CSS 样式表

╰半夏微凉° 2022-11-14 00:48 182阅读 0赞

### 文章目录 ###

*  五、CSS 样式表
 *   *  5.1 CSS 样式表的基本概念
     *  5.2 CSS 的编写规则
     *  5.3 选择器分类
     *   *  5.3.1 标签选择器
         *  5.3.2 类选择器
         *  5.3.3 ID 选择器
         *  5.3.4 结构伪类选择器(位置选择器)
         *  5.3.5 目标选择器
         *  5.3.6 组合选择器
         *  5.3.7 包含选择器(后代选择器)
         *  5.3.8 子元素选择器
         *  5.3.9 属性选择器
         *  5.3.10 伪元素选择器

--------------------

# 五、CSS 样式表 #

## 5.1 CSS 样式表的基本概念 ##

通过 HTML 的标签可以搭建网页的基本结构，而对网页的修饰使用之前的属性将无法完美的修饰;

HTML 标签是用来搭建网页结构的，CSS 是用来对网页上的各种元素进行美化.

**CSS 叫层叠样式表**

## 5.2 CSS 的编写规则 ##

1.  CSS 需要写在 style 标签里面；
2.  每个样式表中都存在一系列样式规则，通过这些规则来对指定的元素进行修饰；
3.  一个样式规则由样式名和样式规则值组成,名和值中间使用“:”分割；
4.  多个样式规则之间使用“；”号分割；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]

## 5.3 选择器分类 ##

选择器主要用于匹配待修饰的 HTML 元素

### 5.3.1 标签选择器 ###

HTML 中存在的标签名做为选择器的名字，则当前页面中同标签的所有元素遵循该样式规则显示；

### 5.3.2 类选择器 ###

定义一个类选择器，并在其中定义样式规则，在需要时使用标签中的 class 属性调用类选择器;（类选择器的定义:.类名）；

### 5.3.3 ID 选择器 ###

将一个 HTML 标签中的 ID 属性做为选择器使用，ID 选择器只能针对同 id 的标签起作用，不需要调用(ID 选择器的定义:\#id\{\});

### 5.3.4 结构伪类选择器(位置选择器) ###

(1):first-child:选择属于其父元素的首个子元素;  
(2):last-child:选择属于其父元素的最后一个元素;  
(3):nth-child(n):选择属于其父元素的第 n 个子元素,(n 可以是公式，如（2n|2n+1);  
(4):nth-child(odd|even):选择属于其父元素的所有(odd)奇数元素或(even)偶数元素;  
(5):nth-last-child(n):选择其父元素中第 n 个子元素，从最后一个元素开始计数.

### 5.3.5 目标选择器 ###

:target,当前访问的元素;

### 5.3.6 组合选择器 ###

(1) 标签名.类名\{\}：p.a\{\}设置所有使用类 a 的 p 标签样式;  
(2) 标签名 1，标签名 2，标签名 3\{\}:a,div\{\}同时设置多个标签样式  
标签名 1，标签名 2，类名\{\}:a,div,.xxx\{\}同时设置多个标签样式.

### 5.3.7 包含选择器(后代选择器) ###

(1) 标签名 标签名\{\}:div p\{\}设置 div 中的所有 p 标签;  
(2) .class 标签名\{\}：.xxx p\{\}设置含有类 xxx 中的所有 p 标签,可以多级包含.

### 5.3.8 子元素选择器 ###

标签名>子元素标签名\{\}:div>p\{\}设置 div 下的直接子元素 p;

### 5.3.9 属性选择器 ###

(1) 标签名\[attr\]:选择标签中存在 attr 属性的元素;  
(2) 标签名\[attr=val\]:选择标签中存在 attr 属性并且值等于 val 的元素;  
(3) 标签名\[attr^=val\]:选择标签中存在 attr 属性并且值以 val 开头的元素;  
(4) 标签名\[attr$=val\]:选择标签中存在 attr 属性并且值以 val 结尾的元素;  
(5) 标签名\[attr\*=val\]:选择标签中存在 attr 属性并且值中含有 val 的元素.

### 5.3.10 伪元素选择器 ###

(1) 标签名::first-letter\{\}:选择文本的第一个单词或字;  
(2) 标签名::first-line\{\}:选择文本的第一行;  
(3) 标签名::selection\{\}:选择设置当前选中文本的样式;  
(4) 标签名::befor\{content:”新内容”\}：在元素内部原有内容前面插入新内容;  
(5) 标签名::after\{content:”新内容”\}:在元素内部原有内容后面插入新内容.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/a6ea960ddd42433e8f02b325af7aace3.png