2.1 CSS复合选择器、元素显示模式

快来打我* 2023-01-13 06:18 192阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*  1.CSS复合选择器
 *   *   *  1.1 后代选择器（重要）
         *  1.2 子选择器（重要）
         *  1.3 并集选择器（重要）
         *  1.4 伪类选择器
         *   *  1.4.1 链接伪类选择器
             *  1.4.2 :focus 伪类选择器
         *  1.5 CSS复合选择器总结
     *  2.CSS的元素显示模式
     *   *  2.1 块元素
         *  2.2 行内元素
         *  2.3 行内块元素
         *  2.4 元素显示模式总结
         *  2.5 元素显示模式转换
         *  2.6 一个小工具的使用 snipaste
         *  2.7 小技巧：单行文字垂直居中的代码

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

# 1.CSS复合选择器 #

CSS中选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，由多种基础选择器通过不同方式进行组合而成的。

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

### 1.1 后代选择器（重要） ###

后代选择器又称为包含选择器，可以选择父元素里面的子元素，写法如下：

元素1 元素2 {
         样式声明 }

ul li {
         样式声明 } /* 选择 ul 里面的所有 li 标签元素 */

*  上述语法就是选择元素1里面的元素2（后代元素），**元素1与元素2之间必须空格隔开**
 *  元素2 可以是儿子，也可以是孙子，只要是元素1的后代就行，例如： ul li a \{ 样式声明 \} (a是ul的孙子，层层嵌套)
 *  元素1和元素2可以是任意的基础选择器，例如使用类选择器： .nav li a \{ 样式声明 \}

### 1.2 子选择器（重要） ###

子元素选择器只能选择作为某一个元素的最近一级子元素，简单理解就是亲儿子元素

元素1 > 元素2 { 样式声明 }

*  上述语法表示选择元素1里面的所有直接后代（子元素）元素2；
 *  元素2必须是亲儿子，其孙子，重孙子都不归他管，也可以叫做亲儿子选择器

### 1.3 并集选择器（重要） ###

并集选择器可以同时选择多组标签，同时为他们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过英文逗号“，”连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1,
    元素2 { 样式声明 }  /*选择元素1和元素2*/

div, 
    p, 
    .pig.li {
        样式声明}  /*后代选择器也可作为并集选择器的一部分*/

### 1.4 伪类选择器 ###

伪类选择器用于给选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

伪类选择器书写最大的特点是用\*\*冒号：\*\*表示，比如 :hover;

伪类选择器有很多，例如链接伪类选择器、结构伪类等

#### 1.4.1 链接伪类选择器 ####

*  a:link 选择所有未被访问的链接
 *  a:visited 选择所有已被访问的链接
 *  a:hover 选择鼠标指针位于其上的链接
 *  a:active 选择活动链接（鼠标按下未弹起的链接）
    
    **链接伪类选择器注意事项**
    
    1.  为了确保生效，请按照LVHA的循顺序声明 :link - :visited - :hover - :active，不可以任意颠倒，口诀（LV包包HAO）
    2.  因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式；
    
    **链接伪类选择器实际开发中的写法**（一般只用:hover)
    
        a {
              
            color: gray;
            text-decoration: none;  /*去掉下划线*/
        }
        a:hover {
               
            color: red;  /* 鼠标经过变颜色 */
            text-decoration: underline; /*鼠标经过加下划线*/
        }

#### 1.4.2 :focus 伪类选择器 ####

focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，主要针对<input>类表单元素，在光标点击时添加背景颜色等

input:focus {
        
        background-color: yellow;
    }

### 1.5 CSS复合选择器总结 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zh1dmoBm-1618559546729)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210416103933928.png)\]][img-Zh1dmoBm-1618559546729_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416103933928.png]

## 2.CSS的元素显示模式 ##

*元素显示模式就是元素（标签）以什么方式进行显示，比如 div自己占一行，一行可以放多个span*

HTML元素一般分为**块元素**和**行内元素**两种类型

### 2.1 块元素 ###

1.  自己独占一行，例如<div>标签
2.  宽度默认是容器（父级宽度）的100%，但是高度、宽度、外边距以及内边距都可以控制
3.  是一个容器及盒子，里面可以放行内或者块级元素

**注意：**

*  文字类的元素内不能使用块级元素
 *  <p>标签主要用于存放文字，因此<p>标签里面不能放块级元素，特别是不能放<div>标签
 *  同理，<h1>等标题标签都是文字类型的块级标签，里面也不能放其他块级标签

### 2.2 行内元素 ###

<span>标签是典型的行内元素，有的地方也将行内元素成为内联元素

1.  相邻行内元素在一行上，一行可以显示多个
2.  默认宽度就是它本身内容的宽度，高度、宽度直接设置是无效的
3.  行内元素只能容纳文本或其他行内元素

**注意：**

*  链接里面不能再放链接
 *  特殊情况下链接<a>里面可以放块级元素，但是给<a>转换一下块级模式更安全

### 2.3 行内块元素 ###

在行内元素里有几个特殊的标签，例如<img />、<input />、<td>等，他们同时具备块元素和行内元素的特点，通常称为行内块元素。

1.  和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.  默认宽度就是它本身内容的宽度（行内元素的特点）
3.  高度、行高、外边距以及内边距都可以控制（块级元素特点）

### 2.4 元素显示模式总结 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KKGZbBW9-1618559546732)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210416112203126.png)\]][img-KKGZbBW9-1618559546732_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416112203126.png]

### 2.5 元素显示模式转换 ###

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性，比如想要增加a链接的触发范围

*  转换为块元素：display: block(重要)
    
        a {
              
            width: 150px;
            height: 50px;
            display: block; /*行内元素转换为块元素*/
        }
 *  转换为行内元素：display: inline
 *  转换为行内块：display: inline-block（重要）

### 2.6 一个小工具的使用 snipaste ###

snipaste是一个简单但是功能强大的截图工具，也可以让你将截图贴回到屏幕上

常用快捷方式：

1.  F1可以截图，同时测量大小，设置箭头，书写文字等
2.  F3在桌面上置顶显示
3.  点击图片，alt可以取色（按下shift可以切换取色模式）
4.  按下esc，取消图片显示

### 2.7 小技巧：单行文字垂直居中的代码 ###

解决方案：让文字的行高等于盒子的高度(height = line-height)，就可以让文字在当前盒子中垂直居中

**单行文字垂直居中的原理**

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwvzsmEf-1618559546734)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210416153858540.png)\]][img-UwvzsmEf-1618559546734_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416153858540.png]

简单理解：行高的上空隙和下空隙把文字挤到中间了

如果行高小于盒子的高度，文字会偏上；如果行高大于盒子的高度，文字会偏下

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-Zh1dmoBm-1618559546729_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416103933928.png]: /images/20221022/fe8fd7ab95144e44a9f2ea011e4432d3.png
[img-KKGZbBW9-1618559546732_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416112203126.png]: /images/20221022/06c3d857cded41b6bf0ad7464cafcbce.png
[img-UwvzsmEf-1618559546734_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210416153858540.png]: /images/20221022/96ec9ff1d0394821a4420a14dbeb3aec.png