目录
一、CSS简介
二、CSS书写位置
三、CSS常用选择器
四、CSS复合选择器
五、关系选择器
六、属性选择器
七、伪类选择器
八、a元素的伪装
九、伪元素选择器
十、继承
十一、选择器的权重
一、CSS简介
css -层叠样式表
-网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式
而最终我们能看到的只有最二上边的一层
-设置网页中元素的样式
二、CSS书写位置第一种方式：内联样式/行内样式
写在开始标签里，写一个style属性，在style属性值里面写样式
样式分为 样式名:样式值; 名值对的结构
可以写多组样式，以;隔开即可
缺点：
1、结构和样式耦合
2、不容易修改
不推荐使用
李主往，罪一程，法。第二种方式：内部样式表
在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式
可以多组样式，以;隔开即可,最后一个样式，可以不写;，但我们一般都写
缺点：不方便复用
p{
color: red;
}
第三种方式：外部样式表
在html文件外新建一个css文件，在css文件内书写样式，然后通过link标签
引入css文件
最推荐使用
需求一：h1标题变红色
h1{
color: red;
}
1、元素选择器
作用：选中对应的标签
语法：标签名{}
例如：h1{},h3{},p{}
需求二：将第一句诗变绿色
#p1{
color: green;
}
2、id选择器
作用：选中对应的id属性值的内容,id属性值不能复用
语法：#id属性值{}
/需求三：将第二句诗、第三句诗都变棕色
.p2{
color: orange;
}
3、class选择器
作用：选中对应的class属性值的内容，可以复用属性值
语法：.class属性值{}
需求四：给所有的标签字体变为24px
*{
font-size: 34px;
}
4、通配选择器
语法：*{}
四、CSS复合选择器复合选择器
1、交集选择器
作用：选中符合多个选择器条件的内容
语法：选择器1选择器2选择器3···{}
例如：div.red{},#div2.red{}
注意：如果选择器中有元素选择器，必须把元素选择器放在前面
2、并集选择器
作用：同时选中符合多个选择器对应的内容
语法：选择器1,选择器2,选择器3····{}
例如：.red,#p2,h1{}
五、关系选择器需求一：通过父元素div，给它的子元素p设置一个字体颜色红色
#school > p {
color: red;
}
1、子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
需求二：div里的span元素字体都变为30px
#school span {
font-size: 30px;
}
2、后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
需求三： 通过前端，找到java，然后java字体颜色变为blue
.p1 + .p2 {
color: blue;
}
3、选择下一个兄弟选择器
作用：通过指定的元素找到下一个兄弟元素
语法：兄+弟{}
4、选择下面所有的兄弟(前面兄弟元素的不选)
语法：兄～弟{}
.p1 ~ p {
font-size: 40px;
六、属性选择器属性选择器
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
七、伪类选择器1、伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
-比如：第一个元素，被点击的元素，鼠标移入的元素···
-特点：一般请情况下，使用：开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
—以上这些伪类都是根据所有的子元素进行排序
1、:first-of-type 第一个子元素
2、:last-of-type 最后一个子元素
3、:nth-of-type() 选中第n个子元素
功能跟上面相似，
不同的是，这是在同类型的子元素中去选择
2、:not() 否定伪类
-将符合条件的元素从选择器中去除
八、a元素的伪装需求一：给未访问过的超链接加红色字体
1、:link 用来表示未访问过的链接（正常链接）
a:link {
color: red;
}
需求二：给访问过的超链接加绿色字体
2、:visited 用来表示访问过的链接
由于隐私的原因，所以visited只能改颜色
a:visited {
color: green;
}
需求三：鼠标移入，链接字体变大到30px
3、:hover 用来表示鼠标移入的状态
a:hover {
font-size: 40px;
color: grey;
}
div:hover{
color: orange;
}
需求四：鼠标点击后，增加背景色pink
4、:active 鼠标点击后的状态
div:active{
background-color: palegreen;
}
:link :visited只针对超链接a标签
:hover :active 针对所有的标签
九、伪元素选择器伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content使用
十、继承同的祖先元素，设置统一的字体大小
body {
font-size: 24px;
}
样式的继承（继承祖先的样式）
定义：为一个元素设置的样式，同时也会应用到它的后代元素上
优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承
十一、选择器的权重选择器的权重
!important 最高优先级
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先
注意：
1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
2、(并集选择器)分组选择器是单独计算的
3、如果优先级计算后相同，此时则优先使用靠下的样式
4、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变
一般来说：
选择器越具体，优先级越高
!important 慎用
样式冲突
通过不同的选择器选中同一个元素，进行一样的样式设定
发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定
