CSS3基础入门与选择器：_css3 序号-CSDN博客

本文链接：https://blog.csdn.net/qq_52207728/article/details/116495434

CSS3简介：
CSS（cascading style sheet，层叠式样式表）是用来给HTML标签添加样式的语言。
CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等。

前端三层：语言功能结构层 HTML 搭建结构、放置部件、描述语义样式层 CSS 美化页面、实现布局行为层 Javascript 实现交互效果、数据收发、表单验证

CSS使样式和结构分离：
CSS使样式和结构分离，样式和结构不用杂糅着写，而是彼此分开：HTML就负责结构，CSS负责样式。
CSS3书写位置：
内嵌式：
在学习CSS时，最常使用内嵌式，顾名思义，内嵌式在.html文件中。
在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句。

<style>
	h1{
		color:red;
	}
</style>

外链式：可以将CSS单独存为.css文件，然后使用\标签引入它

<link rel="stylesheet" href="....">

外链式的优点：多个html网页，可以共用一个css样式表文。

导入式：
导入式是最不常见的样式表导入方法：

<style>
	@import url(......);
</style>

使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒“素面朝天”的时间。

行内式：样式可以直接通过style属性写在标签身上。

<h2 style="color:red;">我是一个二级标题</h2>

行内样式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。

CSS3选择器：

传统CSS2.1选择器：
1、标签选择器和id选择器
2、class选择器
3、符合选择器
4、伪类
CSS3新增选择器：
1、元素关系选择器
2、序号选择器
3、属性选择器
4、CSS3新增伪类选择器
5、伪元素

标签选择器：
标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。
标签选择器将选择页面上所有该种标签，无论这个标签所处
位置的深浅。

标签选择器的常见作用：
标签选择器覆盖面比较大，所以通常用于标签的初始化：
在这里插入图片描述
id属性：
标签可以有id属性，是这个标签的唯一标识。

<p id="para1">我是一个段落</p>

id的名称只能由字母、数字、下划线、短横组成，且不能以数字开头，字母区分大小写，但一般是小写。
同一个页面上不能有相同id
在这里插入图片描述
class选择器：
class属性表示“类名”

<p class="waring"> 我是段落</P>

类名的命名规范与id的命名规范相同。
在这里插入图片描述
class选择器非常灵活：

复合选择器：
1、后代选择器：

在这里插入图片描述
2、交集选择器：

3、并集选择器：

复合选择器：

总结：一定要注意空格！
伪类：

伪类的书写顺序：
爱恨准则：
link：未访问状态
visited：访问后的状态
hover：鼠标悬浮状态
active：鼠标按下不松开的状态
在这里插入图片描述
元素关系选择器：

子选择器：
注意子选择器与后代选择器的区分：

举例：

子选择器从IE7开始兼容。
相邻兄弟选择器：

举例：

相邻兄弟选择器从IE7开始兼容。
通用兄弟选择器：

通用兄弟选择器从IE7开始兼容。
序号选择器：
在这里插入图片描述

序号选择器的兼容性：

属性选择器：

CSS3新增伪类选择器：

伪元素：
CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素。
伪元素用双冒号表示，IE8可以兼容单冒号。
在这里插入图片描述
::selection：
::selectionCSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）。
::first-letter和::first-line：

层叠性和权重性计算：
层叠性：CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。
层叠性：多个选择器可以同时作用于同一个标签，效果叠加。
在这里插入图片描述

！important提升权重：