前端HTML编程4：深入学习CSS

CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）

作者：燐妤

来源：CSDN

原文链接

[CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）](#CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）)

前言

[一、CSS 高级选择器（重点）](#一、CSS 高级选择器（重点）)

[1.1 后代选择器](#1.1 后代选择器)

[1.2 子选择器](#1.2 子选择器)

[1.3 并集选择器](#1.3 并集选择器)

[1.4 复合选择器](#1.4 复合选择器)

二、伪类选择器（超级重要）

[2.1 hover（最常用）](#2.1 hover（最常用）)

[2.2 active](#2.2 active)

[2.3 visited](#2.3 visited)

[2.4 focus](#2.4 focus)

三、结构伪类（重点）

[3.1 first-child](#3.1 first-child)

[3.2 last-child](#3.2 last-child)

[3.3 nth-child()](#3.3 nth-child())

[4.1 before](#4.1 before)

[4.2 after](#4.2 after)

清除浮动

五、背景属性

[5.1 背景颜色](#5.1 背景颜色)

[5.2 背景图片](#5.2 背景图片)

[5.3 背景平铺](#5.3 背景平铺)

[5.4 背景定位](#5.4 背景定位)

[5.5 background 简写](#5.5 background 简写)

[六、display 显示模式（重点）](#六、display 显示模式（重点）)

[6.1 块级元素](#6.1 块级元素)

[6.2 行内元素](#6.2 行内元素)

[6.3 inline-block（重点）](#6.3 inline-block（重点）)

七、盒子模型（核心）

[7.1 border 边框](#7.1 border 边框)

[7.2 padding 内边距](#7.2 padding 内边距)

[7.3 margin 外边距](#7.3 margin 外边距)

[7.4 水平居中（超重点）](#7.4 水平居中（超重点）)

[八、浮动 float（经典布局）](#八、浮动 float（经典布局）)

[8.1 左浮动](#8.1 左浮动)

[8.2 右浮动](#8.2 右浮动)

[8.3 浮动塌陷问题](#8.3 浮动塌陷问题)

[8.4 清除浮动（必会）](#8.4 清除浮动（必会）)

[九、定位 position（超级重点）](#九、定位 position（超级重点）)

[9.1 relative 相对定位](#9.1 relative 相对定位)

[9.2 absolute 绝对定位](#9.2 absolute 绝对定位)

[9.3 fixed 固定定](#9.3 fixed 固定定)

[9.4 z-index 层级](#9.4 z-index 层级)

[十、overflow 溢出处理](#十、overflow 溢出处理)

十一、表格样式优化

[十二、CSS 优先级（必考）](#十二、CSS 优先级（必考）)

十三、企业开发建议（非常重要）

[1、少用 ID](#1、少用 ID)

[2、优先使用 Flex 布局](#2、优先使用 Flex 布局)

[3、养成 reset 习惯](#3、养成 reset 习惯)

前言

在上一篇文章中我们初步了解了什么是CSS，以及初步的了解了他的一些知识点，今天我们更深入的去挖掘CSS里面更为重要的知识点，包含了CSS高级选择器、伪类选择器、背景属性等等核心知识点，还没了解什么是CSS的建议看看我上一篇的文章，初识CSS，对你有帮助！！！

OK，废话不多说，正片开始

一、CSS 高级选择器（重点）

这一部分是真正的核心。

很多兄弟看到这里开始懵。

没关系，我给你拆开讲。

1.1 后代选择器

复制代码

ul a{
    color:red;
}

意思：

复制代码

选中 ul 里面所有的 a 标签

注意：

不仅儿子能选中。

孙子、重孙都能选中。

比如：

复制代码

<ul>
    <li>
        <a>链接</a>
    </li>
</ul>

也会生效。

1.2 子选择器

复制代码

ul>a{
    color:blue;
}

意思：

复制代码

只选中 ul 的亲儿子 a

如果 a 在 li 里面：

复制代码

<ul>
    <li>
        <a></a>
    </li>
</ul>

则不会生效。

这就是：

复制代码

后代选择器 和 子选择器 的区别

1.3 并集选择器

复制代码

h1,p,.box{
    color:red;
}

意思：

复制代码

h1
p
.box
同时使用同一套样式

适合减少重复代码。

1.4 复合选择器

复制代码

div.box{
    color:red;
}

意思：

复制代码

选中 class 为 box 的 div

注意：

复制代码

<p class="box"></p>

不会生效。

二、伪类选择器（超级重要）

伪类：

元素特殊状态下的样式。

2.1 hover（最常用）

复制代码

a:hover{
    color:red;
}

效果：

复制代码

鼠标移入时变红

这个效果你每天都在网页上看到。

比如：

淘宝
京东
B站
GitHub

全部都在用。

2.2 active

复制代码

a:active{
    color:green;
}

点击时生效。

2.3 visited

复制代码

a:visited{
    color:gray;
}

访问过后的链接颜色。

2.4 focus

复制代码

input:focus{
    border:1px solid blue;
}

输入框获得焦点时触发。

企业开发中非常常见。

三、结构伪类（重点）

结构伪类：

不需要 class，也能精准选中元素。

3.1 first-child

复制代码

ul li:first-child{
    color:red;
}

选中：

复制代码

第一个 li

3.2 last-child

复制代码

ul li:last-child{
    color:blue;
}

选中最后一个元素。

3.3 nth-child()

这个是核心中的核心。

选中第几个

复制代码

ul li:nth-child(2){
    color:red;
}

选中第二个。

选中奇数

复制代码

ul li:nth-child(odd)

等于：

复制代码

2n+1

选中偶数

复制代码

ul li:nth-child(even)

等于：

复制代码

2n

前三个

复制代码

ul li:nth-child(-n+3)

第四个以后

复制代码

ul li:nth-child(n+4)

企业开发中：

表格隔行变色
商品列表
卡片布局

都会大量使用。

四、伪元素选择器

伪元素：

相当于创建一个虚拟元素。

4.1 before

复制代码

div::before{
    content:"★";
}

会在 div 最前面添加内容。

4.2 after

复制代码

div::after{
    content:"";
}

最经典的用途：

清除浮动

复制代码

.box::after{
    content:"";
    display:block;
    clear:both;
}

这是企业开发高频面试题。

五、背景属性

5.1 背景颜色

复制代码

background-color:red;

5.2 背景图片

复制代码

background-image:url(img/1.jpg);

5.3 背景平铺

复制代码

background-repeat:no-repeat;

取值：

值	作用
repeat	默认平铺
repeat-x	横向平铺
repeat-y	纵向平铺
no-repeat	不平铺

5.4 背景定位

复制代码

background-position:center center;

常用值：

left
right
center
top
bottom

5.5 background 简写

复制代码

background:url(img/1.jpg) no-repeat center center;

六、display 显示模式（重点）

HTML 元素默认分两类：

6.1 块级元素

特点：

独占一行
可以设置宽高

例如：

复制代码

div
p
h1-h6

6.2 行内元素

特点：

不独占一行
不能设置宽高

例如：

复制代码

span
a
b

6.3 inline-block（重点）

复制代码

display:inline-block;

特点：

复制代码

既能同行显示
又能设置宽高

这是前端布局神技。

七、盒子模型（核心）

网页中的所有元素：

本质上都是盒子。

盒子由：

复制代码

content 内容
padding 内边距
border 边框
margin 外边距

组成。

7.1 border 边框

复制代码

border:1px solid red;

三部分：

复制代码

粗细
样式
颜色

7.2 padding 内边距

内容与边框之间的距离。

复制代码

padding:20px;

7.3 margin 外边距

盒子与盒子之间的距离。

复制代码

margin:20px;

7.4 水平居中（超重点）

复制代码

margin:0 auto;

注意：

复制代码

必须是块级元素
必须设置宽度

八、浮动 float（经典布局）

复制代码

float:left;

作用：

复制代码

让元素横向排列

8.1 左浮动

复制代码

float:left;

8.2 右浮动

复制代码

float:right;

8.3 浮动塌陷问题

浮动后：

复制代码

父元素高度消失

这是经典问题。

8.4 清除浮动（必会）

推荐方案：

复制代码

.box::after{
    content:"";
    display:block;
    clear:both;
}

企业开发标准写法。

九、定位 position（超级重点）

定位：

可以精准控制元素位置。

9.1 relative 相对定位

复制代码

position:relative;
left:20px;
top:10px;

特点：

不脱离文档流
相对自身移动

9.2 absolute 绝对定位

复制代码

position:absolute;

特点：

脱离文档流
相对于最近定位父级

注意：

父元素通常要加：

复制代码

position:relative;

9.3 fixed 固定定

复制代码

position:fixed;
right:0;
bottom:0;

特点：

复制代码

固定在浏览器某个位置

典型案例：

返回顶部
客服按钮
悬浮广告

9.4 z-index 层级

复制代码

z-index:999;

值越大：

复制代码

层级越高

注意：

只有定位元素有效。

十、overflow 溢出处理

当内容超出盒子：

复制代码

overflow:hidden;

常用值：

值	作用
visible	默认
hidden	隐藏
scroll	强制滚动条
auto	自动滚动条

十一、表格样式优化

CSS 中表格最经典属性：

复制代码

border-collapse:collapse;

作用：

复制代码

合并表格边框

示例：

复制代码

table{
    border-collapse:collapse;
}

十二、CSS 优先级（必考）

优先级规则：

复制代码

!important
>
行内样式
>
id选择器
>
class选择器
>
标签选择器
>
*

十三、企业开发建议（非常重要）

很多兄弟学 CSS 时容易踩坑。

这里给你几个建议。

1、少用 ID

企业开发：

复制代码

99% 使用 class

2、优先使用 Flex 布局

虽然 float 很经典。

但现在：

复制代码

Flex 才是主流

3、养成 reset 习惯

浏览器默认样式不统一。

通常会：

复制代码

*{
    margin:0;
    padding:0;
}

4、命名规范

不要：

复制代码

.a
.b
.c

十四、学习路线建议

如果你现在刚学完 HTML + CSS。

建议你：

第一阶段

练习：

登录页
注册页
新闻页面
商品卡片

第二阶段

练习：

淘宝首页
京东首页
B站首页

第三阶段

学习：

Flex
Grid
响应式布局
Bootstrap

第四阶段

进入：

JavaScript
Vue
React

十五、总结

这篇文章我们学习了：

✅ CSS 基础语法

✅ 高级选择器

✅ 伪类与伪元素

✅ 背景属性

✅ display 显示模式

✅ 盒子模型

✅ 浮动与清除浮动

✅ 定位 position

✅ overflow 溢出处理

✅ CSS 优先级

这些内容：

是整个前端开发的根基。

只要把这些学扎实。

后面的：

Flex
Vue
React
UniApp
小程序

你都会轻松很多。

最后

学习前端最重要的不是看懂。

而是：

多敲代码！！！

CSS 真的是：

复制代码

看一遍：会了
自己写：不会

所以一定要：

多临摹页面
多做布局
多拆网页
多练 hover 效果

坚持一段时间后，你会明显发现：

"原来网页真的是一个个盒子拼出来的。"

如果这篇文章对你有帮助的话，动动发财的小手点个免费的赞赞吧，谢谢各位兄弟！！！

前端HTML编程4：深入学习CSS

CSS3 高级选择器、盒子模型与定位完全指南（超详细入门版）

前言

一、CSS 高级选择器（重点）

1.1 后代选择器

1.2 子选择器

1.3 并集选择器

1.4 复合选择器

二、伪类选择器（超级重要）

2.1 hover（最常用）

2.2 active

2.3 visited

2.4 focus

三、结构伪类（重点）

3.1 first-child

3.2 last-child

3.3 nth-child()

选中第几个

选中奇数

选中偶数

前三个

第四个以后

四、伪元素选择器

4.1 before

4.2 after

清除浮动

五、背景属性

5.1 背景颜色

5.2 背景图片

5.3 背景平铺

5.4 背景定位

5.5 background 简写

六、display 显示模式（重点）

6.1 块级元素

6.2 行内元素

6.3 inline-block（重点）

七、盒子模型（核心）

7.1 border 边框

7.2 padding 内边距

7.3 margin 外边距

7.4 水平居中（超重点）

八、浮动 float（经典布局）

8.1 左浮动

8.2 右浮动

8.3 浮动塌陷问题

8.4 清除浮动（必会）

九、定位 position（超级重点）

9.1 relative 相对定位

9.2 absolute 绝对定位

9.3 fixed 固定定

9.4 z-index 层级

十、overflow 溢出处理

十一、表格样式优化

十二、CSS 优先级（必考）

十三、企业开发建议（非常重要）

1、少用 ID

2、优先使用 Flex 布局

3、养成 reset 习惯

4、命名规范

十四、学习路线建议

第一阶段

第二阶段

第三阶段

第四阶段

十五、总结

是整个前端开发的根基。

最后

多敲代码！！！

推荐练习项目