介绍css选择器之前，我们先了解什么是HTML，HTML由什么构成
HTML
网页基本结构：
<!DOCTYPE> --doc指向document 表示文档 文档就是网页 一个网页就是一个文档 文档声明 用来表示当前网页是遵循html5规范
<html lang="en"> --html根标签 一个网页有且只有一个根标签 网页的所有内容都要在这个标签里面 lang="en" 用来设置属性
<head> -- 只是html的子标签 head表示的网页的头部 可以在这里设置网页中的各种信息 不会在网页中显示
<meta charset="utf-8"> --head的子元素 用来设置网页的元数据 charset=“utf-8” 避免网页乱码问题
<title>网页标题</title> --用来设置网页标题
</head>
<body> --html的子标签 网页中的可见内容都应该写在body标签里面
</body>
</html>
生成网页的基本结构 ！ + tab键
HTML基本语法：
-
一个标签也称为一个元素 成对出现：<标签名>标签体</标签名>
-
自结束标签 <标签名> <标签名/>
-
属性:在开始标签（或自结束标签） 中可以为元素设置属性 属性用来描述元素 属性是一个名值对结构 属性名=属性值 属性值需要使用引号引起来 一个元素可以同时指定多个属性 多个属性之间使用空格分离 有些属性 属性名和属性值相同 此时可以省略属性值
html中不区分大小写 但是建议使用小写
元素的嵌套规则
在html中 元素可以分为块元素和行内元素
都是块元素 会独占页面的一行 block 会自上向下垂直排列
块元素 用来对网页进行布局 将每一个页面分为一块一块的 行内元素一般用来放置文字
最常用的块元素就是div
最常用的行内元素 就是span
-行内元素(inline)
行内元素只会占用自身的大小 自左向右水平排列
元素的嵌套规则：
一般都是块元素中可以块元素 也可以放置行内元素
行内元素中 记录不要放置块元素
a元素中可以放置除它自身外的行内元素
p元素中不能放置块元素
注意：浏览器在渲染页面时 会自动修复html中的语法错误
body
特殊符号
图片
超链接
CSS
内联样式（不推荐）
内部样式表（也可以）
外部样式表（推荐使用）使用<link rel="stylesheet" href="./CSSstyle/1.css">来引入
元素选择器
元素选择器：根据标签名来选中多个元素
语法： 标签名{}
--例如 p{} div{} h1{}
id选择器
id选择器：注意id选择器尽可能唯一 不要重复
--根据元素的id属性选中其中的一个元素
语法 #id名{ }
例子：
#p1{ } #box{ } #head{ }
类选择器
类选择器：（最常用的选择器）
根据元素的class属性选中元素
class属性和id类似 每一个元素都可以指定 用来为元素进行分类
与id1属性的区别就是可以重复
元素指定相同的class 拥有同一个class的元素可以说他们是同一类元素
语法：
.class名{ }
也可以同时为一个元素指定多个class
例如：.p1{] .box{} .head{}
属性选择器
属性选择器：
用来根据元素的属性来选中元素
语法：
[属性名]{ }
[属性名=属性值]{} 选中指定属性值的元素
[属性名^=属性值]{} 选中属性值以指定内容开头的元素
[属性名$=属性值]{} 选中属性值以指定内容结尾的元素
[属性名*=属性值]{} 选中属性值包含指定内容的元素
交集选择器
交集选择器
元素名(id名称)[title=名]{}
作用 选中符合多个选择器元素
语法 ：选择器1选择器2选择器3选择器4...{}
例子：
div.box{}
div#box1{]
分组选择器
分组选择器：
--作用：同时选中多个选择器对应的元素
语法 ：选择器1,选择器2,选择器3,....选择器n{}
p,div,h3{ color: #D62828; }
子元素选择器
子元素选择器：
作用:选定指定元素的子元素
语法 父元素>子元素{}
后代元素选择器
后代元素选择器：
作用 选中指定元素的后代元素
语法: 祖先 后代{}
兄弟元素选择器
兄弟元素选择器：
作用：选中指定的兄弟元素
语法：
兄+弟{} 选中紧随其后的一个兄弟
兄~弟{} 选中后边的所有兄弟元素
伪类元素选择器
伪类：
特殊的类 用来表示元素的状态
像超链接 一个链接有没有被访问过就是一种特殊的状态
在css中 可以使用：:visited来表示访问过的超链接
注意：伪类使用冒号开头
a的伪类：
:link 表示未访问过的超链接
:visited
访问过的链接
:hover
鼠标移入的元素
:active
鼠标点击的元素
:visited
根据浏览器的浏览记录来更改颜色
a:visited{
color: orange;
}
a:link{
color: olive;
}
a:hover{
color: #FCBF49;
}
结构伪类
结构伪类：
:root{}
--根元素
:root{}等价于html{}
:empty{}
--空元素
:nth-child(参数){}
--第n个子元素
:nth-last-child(参数){]
--倒数第n个元素
:nth-of-type(){}
--同类型中的第n个子元素
:first-child
--第一个子元素
:first-of-type
--同类型里面的元素
:lats-child
--最后一个子元素
li:first-child{
/*这个就读作 li下的第一个子元素*/
color: #D62828;
}
li:first-of-type{
color: #FCBF49;
}
li:nth-child(1){
/*里面的参数代表第几个子元素*/
color: orange;
}
li:nth-last-child(1){
color: #D62828;
/* 选择倒数第1个元素*/
}
否定伪类
p:not(.p1){
/*这个就是读作所有p标签但除了 class为p1的元素选中 :not（） */
color: #D62828;
}
伪元素
伪元素：
伪元素表示的是页面中特殊的位置
伪元素使用 ::开头
XXX ::before
表示元素的开始位置(开始标签之后)
XXX ::after
表示的是元素的结束位置(结束标签之前)
通过before after可以选中元素开始或结束的位置从而为其天津爱内容
是通过css添加 不算是网页中的正式内容
通过它可以为元素添加统一的符号
也可以在特殊场景下来调整一下页面的样式
p::first-letter选中文本的第一个字
p::first-line 选中文本的第一行
::selection 表示选中后的文字样式
例子
div::before{
/* 表示选中div的开始位置
*/
content: "hello";
color: #D62828;
}
div::after{
content: "你好";
color: #FCBF49;
}
p::first-letter{
/*选中文本的第一个字*/
font-size: 30px;
}
p::first-line{
/* 选中文本的第一行*/
}
p::selection{
color: #FCBF49;
}
样式继承
样式继承：
设置给祖先元素的样式也会同时应用到后代元素上
继承的存在大大的简化了样式的编写
但是并不是所有的样式都会发生继承
所有的布局相关的样式不会发生继承 背景 边框
样式冲突
样式冲突：
当我们使用不同的选择器 选中同一个元素并设置相同的样式时 就发生了样式的冲突
当样式冲突发生时 那个样式生效由选择器的优先级决定
继承的样式没有优先级
通配选择器 0,0,0,0
元素选择器 0,0,0,1
类和伪类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式：1,0,0,1
比较优先级需要将多个选择器的优先级整合计算
div.box1
.box1
优先级高的优先显示
优先级的累加无法跨越数量级 如果优先级一样 则优先显示靠下的样式
如果为样式添加了!important 则该样式会获得最高优先级
注意：分组选择器的优先级是单独计算
