一. css基本概述
1. css简介
CSS（cascading style sheet，层叠样式表）是用来给 HTML 标签添加样式的语言
CSS3 是 CSS 的最新版本，增加了大量的样式、动画、3D 特效和移动端特性等
CSS 用来解决 html 页面不好看的问题
前端三层
2.css书写位置
（1） 内嵌式
在学习 CSS 时，最常使用内嵌式，顾名思义，内嵌在.html 文件中
在
<head></head>标签对中，书写<style></style>标签对，里面书写 CSS 语句
(2)外链式
可以将 CSS 单独存为.css 文件，然后使用
<link>标签引入它
3.标签选择器
标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
4. 认识Id属性
标签可以有 id 属性，是这个标签的唯一标识, 类似于身份证号
<p id="para1">我是一个段落</p>
id 的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同 id 的标签
5. class选择器
class 属性表示“类名”
<p class="warning">我是段落</p>
类名的命名规范和 id 的命名规范相同
6. 两者的区别
id 是唯一的, 相当于身份证号
class 不是惟一的, 多个标签可以有相同类名, class 相当于分组
一个标签只能有一个 id, 一个 id 的名字只能在页面中出现一次
7. 通配符选择器
找到页面上所有的元素
去除标签的默认 margin 和 padding
* {
margin: 0;
padding: 0;
}
二 . css选择器
1. 复合选择器
| 选择器名称 | 示例 | 示例的意义 |
|---|---|---|
| 后代选择器 | .box .spec | 选择类名为 box 的标签内部的类名为 spec 的标签 |
| 交集选择器 | li.spec | 选择既是 li 标签, 也属于 spec 类的标签 |
| 并集选择器 | ul, ol | 选择所有 ul 和 ol 标签 |
2.伪类
| 选择器名称 | 示例 | 示例的意义 |
|---|---|---|
| 后代选择器 | .box .spec | 选择类名为 box 的标签内部的类名为 spec 的标签 |
| 交集选择器 | li.spec | 选择既是 li 标签, 也属于 spec 类的标签 |
| 并集选择器 | ul, ol | 选择所有 ul 和 ol 标签 |
a 标签的伪类书写, 要按照"爱恨准则"的顺序, 否则会有伪类不生效
ha 必须在 lv 之后, lv 可以互换
3. 元素关系选择器
| 名称 | 举例 | 意义 | | ------- | -------- | -------------------- | | 子选择器 |
div>p| div 的子标签 p | | 相邻兄弟选择器 |img+p| 图片后面紧跟着的段落将被选中 | | 通用兄弟选择器 |p~span| p 元素之后的所有同层级 span 元素
4. 序号选择器
| 举例 | 意义 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(3) | 第 3 个子元素 |
| :nth-of-type(3) | 第 3 个某类型子元素 |
| :nth-last-child(3) | 倒数第 3 个子元素 |
| :nth-last-of-type(3) | 倒数第 3 个某类型子元素 |
:first-of-type(),:last-of-type()
:first-of-type() 当前同一类标签中的第一个
:last-of-type() 当前同一类标签中的最后一个
:only-child()以及其他
:only-child(), 选择的元素是其父级的唯一子元素
:only-of-type(), 选择的元素是同类标签中的唯一一个
:nth-child(), 可以选择任意序号的子元素
:nth-of-type() ; :nth-last-child()
:nth-of-type()将选择同种标签指定序号的子元素
:nth-last-child() 是倒数选择, 表示子集中的最后一个
:nth-last-of-type() 也是倒数选择, 表示该类型的最后一个
:nth-last-child() 和 :nth-last-of-type()的区别
:nth-last-child()和:nth-last-of-type()都是倒数选择
:nth-last-child(), 以当前子集作为查找范围
:nth-last-of-type(), 以当前标签类型作为查找范围
取反选择器
属性选择器
CSS3 新增伪类
| 伪类 | 含义 |
|---|---|
:empty | 选择空标签 |
:focus | 选择当前获得焦点的表单元素 |
:enabled | 选择当前有效的表单元素 |
:disabled | 选择当前无效的表单元素 |
:checked | 选择当前已经勾选的单选按钮或者复选框 |
:root | 选择根元素, 即<html>标签 |
伪元素
::before 和::after
::before 创建一个伪元素, 其将成为匹配选中的元素的第一个子元素, 必须设置 content 属性表示其中的内容
::after 创建一个伪元素, 其将成为匹配选中的元素的最后一个子元素, 必须设置 content 属性表示其中的内容
::section
::selection CSS 伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）
::first-letter 和::first-line
::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line 会选中某元素中（必须是块级元素）第一行全部文字
