我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
1.1 后代选择器和子代选择器的区别
- 后代选择器：用于选择指定元素下的符合条件的所有后辈元素，而子元素选择器是选择指定元素下的第一代元素
- 后代选择器是空格隔开，子选择器是" > "隔开的
eg
- 基础代码：
-
//后代选择器
div p{
color: red;
}
//子选择器
div>p{
color:blue;
}
浏览器显示样式（对比）：
解释：后代选择器是选择div下的所有后代p标签，而子选择器只会选中div下的第一代p标签，如图
1.2 并集选择器和交集选择器的区别
- 并集选择器：顾名思义，用逗号隔开，常用作，将两个单标签一起来设置某种属性,可以是类也可以是id
- 交集选择器：顾名思义，之间没有任何符号，常用作，将通过大范围来确定小范围
基础代码：
-
<h1 class="_q">我是标题</h1> <p class="_r">我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> //并集 ._q,._r{ color: red; } //交集 p._r{ color:blue; }1.3 兄弟选择器
- +选择器：选择紧跟一元素的兄弟元素（+两侧的元素，同属一个父亲，右侧元素是左侧紧邻的兄弟元素，改变的是右侧元素的样式 ）
- ~选择器：查找某个指定元素后面的所有兄弟节点（同一个父亲，无需相邻，只要在其后的兄弟就可）
eg
- 基础代码：
//+选择器
h1+p{
color: red;
}//~选择器
h1~p{
color: yellow;
}浏览器显示样式（对比）：
1.4 序选择器(伪类选择器)
- 同级别的第几个=> :first-child / :last-child / :nth-child(n) / :nth-last-child(n)/:only-child
- :first-child/ :last-child (选中同级别的第一个/最后一个是xx，则) :only-child(选中父元素只有一个子元素的元素)
- :nth-child（选中同级别的第n个） :nth-last-child(选中同级别的倒数第n个)
2.同类型的第几个=> :first-of-type/ :last-of-type/ :nth-of-type(n)/ :nth-last-of-type(n)/ :only-of-type/
- :first-of-type /:last-of-type (选中同级别中同类型的第一个/最后一个是xx，则) :only-of-type(选中父元素子元素的类型只有一种的元素)
- :nth-of-type(n) /:nth-last-of-type(n)/ 同上
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
p:first-child{
background: #ccc;
}
p:first-of-type{
color: red;
}
</style>
</head>
<body>
<div>
<h3><em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>p:first-child 这里先找某个父元素的第一个子元素.(父元素从body开始)
如上段代码:没有符合的p
p:first-of-type 选择的p元素是其父元素的第一个p元素 先把所有p元素找出来,在找出第一个
且 分属不同的父元素，满足条件,都会被命 中
<div class="demo">
<span>span1</span>
<p>
<span>span2</span>
<span>span3</span>
</p>
<span>span4</span>
</div>.demo span:first-of-type { color: #f00; }
结果span1和span2都会被命中，因为span1和span2分属不同的父元素，并且都是其父元素的首个span元素，所以都会被命 中。
3.奇/偶/nx+y(略)
二.css三大特性（继承性，层叠性，优先性）
- 继承性=>子元素可以继承父元素的样式（text- ,font- ,line-这些元素开头的以及color都可以继承）
but 1` a标签的颜色不能继承，必须对a标签本身设置
2` h标签的字体大小不能修改，同上
- 层叠性=> 后面覆盖前面
- 优先性=> ！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
三.CSS一些属性
3.1 div和span区别（块级/行内区别）
块级/行内区别:
- 行内元素常见的有：span,img,a,input,label,select,textarea,br
- 块级元素常见的有：div,p,ul-li,nav 行内块级：button
- 行内元素：从左往右排列，不占据一行；对其设置宽高及margin的上下距离无效
- 块级元素：单独占据一行
- 行内块级元素：不会自动换行，相比行内可以设置宽高，具有行内块级共同特性
- 块级/行内可通过display来改变 inline/block
3.2 背景图片
- background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment:fixed - 背景图片固定 fixed
- 背景图片拉伸 background-size:auto 100%
- 自动等比例拉伸 background-size:cover /100% 100%(全扭曲)
3.3边框属性（略）
3.4css盒子模型
1. content (内容)
2. padding (内填充/内边距) :调整内容和边框之间距离时使用这个属性 
3. border (边框)
4. margin (外边距) 相邻同辈元素之间的距离，多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
关于盒子的描述：
一个div 盒子宽度=内容宽+左右内边距宽+左右边框宽
若仅仅设置宽高度的盒子，盒子的大小就是盒子的宽高。如果还设置了padding，则盒子会变大。因此设计一个宽高固定的盒子，在加padding和border时，重新计算盒子大小
box-sizing:border-box; => 盒子的宽高就是给定的，如果设置了padding和border，内容相应减少
margin折叠 =>只有在块级元素，取最大值做外边距
四.CSS布局定位
4.1浮动定位
- ①浮动元素的脱标：脱离了标准文档流=>不在页面占位置；标签一旦设置浮动，就能并排，且无论块级行内都可设置宽高
- ②浮动元素的排序规则：（1）相同位置上的浮动元素，先浮动的会在前面，后浮动的在后面
（2）不同方向上，左浮动找左浮动，右浮动找右浮动
（3）浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置确定
（4）浮动+非浮动=>浮动的一行，非浮动的正常
（5）非浮动+浮动：非浮动正常，浮动另起一行
（6）非浮动+非浮：每个另起一行
eg1 基础代码
浏览器显示：
解释：由（4）浮动+非浮动=>浮动的一行，非浮动的正常（6）非浮动+非浮：每个另起一行，得上图
eg2
浏览器显示：
解释：由（5）非浮动+浮动：非浮动正常，浮动另起一行，得上图
- ③浮动元素的互相贴靠：随着外部的盒子的宽高，会让内部浮动元素的位置发生变化。如下图
- ④浮动元素紧凑效果： 一个浮动元素没有设置width，那么会自动收缩为文字的宽度（和行内元素很像）
清除浮动：
在标准文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素浮动之后，子元素会完全脱离文档流，无法撑开父盒子，导致父盒子没有高度
原因：子元素浮动，父元素一般不设置高度
基本代码：
浏览器显示如图： 可以看到下图的父元素高度为零
清除浮动方法： ①给父盒子设置高度
②clear：both； => 左右两边不允许有浮动元素（給浮动元素后加一个div（空）元素，且不浮动）
好处：利用伪元素具有clear清除浮动的属性来解决 父标签塌陷的问题（父标签撑不起来的问题）
③伪元素清除法
④overflow：hidden；
清除浮动添加的代码：
<div class="father1">
<p>我是文字一</p>
<p>我是文字一</p>
<p>我是文字一</p>
<p>我是文字一</p>
<div class="hhh"></div>
</div>
<div class="father2">
<p>我是文字四</p>
<p>我是文字四</p>
<p>我是文字四</p>
<p>我是文字四</p>
<p>我是文字五</p>
<p>我是文字六</p>
<div class="aaa"></div>
</div> .hhh{
clear: both;
}
.aaa{
clear:both;
}浏览器显示
这里还有一个因素:
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
希望class=hhh的div能够换行,而不是和浮动的p元素一行,可以通过清除浮动来实现
4.2 position定位
position: absolute / relative / fixed / static（默认）
- position: relative相对定位
无论是否位移，相对位移的元素仍会在文档中占用初始的空间，位移可能遮挡其他元素。
相对定位的元素的参考对象是它自己
- position: absolute 绝对定位
绝对定位相对的是最近的一个有定位的祖先元素的定位
①绝对定位会将元素拿出文件流，不会占用原有空间。
②绝对定位后会生成一个块，而不论它在正常流中生成任何框。
③绝对定位后，很难用他构建视图宽度和内容长度而变化的自适应或响应式布局
- 子绝父相：父元素使用relative，子元素使用absolute，子元素就可以在父元素的范围内定位
- position：fixed =>相对于浏览器窗口的定位，可用鼠标滑轮体现效果
- 绝对定位的盒子居中（水平垂直居中）：
left：50%；top：50%； （父盒子的一半大小），同时 margin-left：自己width的负一半值，margin-top：-height/2
.box {
position: absolute;
/* 1. left 走 50% 父容器宽度的一半 */
left: 50%;
/* 2. margin 负值 往左边走 自己盒子宽度的一半 */
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
/* margin: auto; */
}
解释：由于盒子是有宽高的，在left：50%；top：50%；只能将一个点定位到水平垂直居中，所以要减去盒子宽高的各一半，通过margin来解决
- z-index
注：①默认情况下定位流的元素会盖住标准流的元素，定位流后编写的元素会盖住前面编写的
默认属性值为零，取值越大，越居上。取值相同，后来居上。不能加单位。
②只有相对定位，绝对定位，固定定位有此属性。标准流，浮动，静态定位均无。
③和浮动一样，元素添加了绝对定位和固定定位后，都会转为行内块模式。。
eg
.father1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.father2{
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
}
.son1{
width: 100px;
height: 100px;
background-color: #00A000;
position: absolute;
left: 350px;
top: 300px;
}
.son2{
width: 100px;
height: 100px;
background-color:sandybrown;
position: absolute;
left: 300px;
top:50px;
}
</style>
</head>
<body>
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>浏览器显示：
此时没有z-index，后面编写的会覆盖前面的
给son1加上一个
z-index:1;浏览器显示：
四种z-index失效的原因：
①父标签position为relative 改为absolute
②问题标签无position属性（除static）
③问题标签含有浮动属性 去掉浮动即可
④IE6层级表现有时候不是看子标签的z-index有多高，而是看整个DOMtree 的第一个reative属性的父标签的层级（常见）
从父现象：如果两个元素的父元素都没有z-index，那么谁的z-index大谁就在上面。如果父元素设置了z-index，则比较父元素的z-index大小，子元素的z-index失效。打个比方：若两个兄弟元素a,b；a 的z-index=1，b的z-index=2。则b在a的上面，若a中有一个子元素c的z-index=999，则b也会在c的上面
eg
代码
.father1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
z-index:1;
}
.father2{
width: 300px;
height: 300px;
background-color: yellow;
position: relative;
z-index:2;
}
.son1{
width: 100px;
height: 100px;
background-color: #00A000;
position: absolute;
left: 350px;
top: 300px;
z-index:10000;
}
.son2{
width: 100px;
height: 100px;
background-color:sandybrown;
position: absolute;
left: 300px;
top:50px;
z-index:1;
}
</style>
</head>
<body>
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>浏览器显示：
解释：由于父元素设置了z-index，子元素的z-index就失效了。解决办法，去除父元素z-index或者将父元素的z-index提高
五.CSS过渡动画模块
5.1 伪类选择器
伪类选择器分为：
（一）静态/超链接伪类 a:link{ } , a:visited{} 只能用于超链接
a标签伪类选择器
是什么？ 专门用来修改a标签不同状态的样式
有哪些？ （修改） a:link(从未被访问过的)/ a:visited(被访问过的)/a:active(鼠标长按下的)/a:hover(鼠标悬停在a标签的)
注：a标签的伪类选择器可以一起出现，顺序遵守爱恨原则 love hate
（二）动态伪类 :hover , :active , :focus
鼠标 悬停 点击（不松手） 获得焦点
eg： input:focus{ }
label:hover{ }
table tr:hover{ }
eg
//原参数
div:{
width:200px;
height:50px;
background-color:red;
}
//直接改变参数，无动画
div:hover{
width:300px;
background-color:blue;
}
5.2过渡模块 transition
transition-property:width,background-color;过渡三要素：
①要有变化的属性
②告诉系统哪个属性需要过渡：（transition-property）
③过渡时长（transition-duration）
连写： transition : width(过渡属性) 5s(过渡时长) linear(运动速度) 10s(延迟时间);
5.3 2D转换模块 transform
对元素进行旋转操作
（1）transform :rotate(45deg) translate(100px,0px) scale(1.5，1); 用空格隔开
旋转 平移 水平垂直 缩放 水平垂直 rotateX绕X轴默认
eg
（2）透视属性（perspective:100px） 透视：近大远小
注：透视属性必须添加到需要呈现近大远小效果元素的父元素上面。
（3）形变中心点的取值三种样式：
transform-origin:具体像素（200px，0px）/ 百分比（50% 50%）/特殊关键字（center center）;
过渡+2D:
eg1：
div img{
width:310px;
height:438px;
transform-origin:center center;
transition:transform 2s;
}
div:hover img{
transform:rotate(90deg);
}eg2:
ul li:nth-child(1){
//一开始的状态
transform:rotate(30deg);
}
ul li:hover{
//需要执行的过渡效果
transform:rotate(0deg) scale(1.5);
}5.4 盒子阴影和文字阴影
如何给盒子添加阴影？
box-shadow: 5px(水平偏移) 5px(垂直偏移) 10px(模糊度/模糊距离) 10px(阴影扩展) black(阴影颜色) inset(内外阴影/默认外阴影增加内阴影)
如何给文字添加阴影？
text-shadow：颜色 水平偏移 垂直偏移 模糊值；
浏览器显示：
过渡模块和动画模块的区别：
过渡模块需要人为的去触发这个反应，而动画模块不需要。
5.5、动画模块 animation
div{
width: 300px;
height: 300px;
background-color: red;
// 动画 名称 时长 运动速度 延迟时间 执行次数（infinite无限的） 往返动画（alternative往返的）
animation: za 3s linear 2s 3 alternate;
margin: 100px auto;
}
@keyframes za { 或者 @keyframes za{
0%{
transform: rotate(10deg); from{ margin-left:0;}
}
to{ magin-left:500px;)
50%{
transform: rotate(180deg); }
}
100%{
transform: rotate(230deg);
}
}注：两种书写方式只举例 ，但不等同
5.6 3D转换模块
给其父亲加一个transform-style: preserve-3d;
结束了啊
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
