选择器

属性选择器

 /* 具有value属性的input元素 */
 input[value] {
 	color: red;
 }

选择符	简介
E[att]	选择具有att属性的 E 元素
E[att="val"]	选择具有att属性且属性值等于val的 E 元素
E[att^="val"]	选择具有att属性且值以val开头的 E 元素
E[att$="val"]	选择具有att属性且值以val结尾的 E 元素
E[ATT*="val"]	选择具有att属性且值中含有val的 E 元素

结构伪类选择器

根据文档结构来选择元素

选择符	说明
E:first-child	选择父元素中的第一个子元素 E
E:last-child	选择父元素中的最后一个子元素 E
E:nth-child(n)	选择父元素中的第 N 个子元素 E
E:first-of-type	指定类型 E 的第一个
E:last-of-type	指定类型 E 的最后一个
E:nth-of-type(n)	指定类型 E 的第 N 个

nth-child(n)

• n 可以是数字 ， 关键字 和 公式
• 关键字 even：偶数 odd：奇数

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ...
n+5	从第 5 个开始到最后
-n+5	从第 5 个开始到最前

注意

• 结构伪类选择器一般用于选择父级里面的第 N 个子元素
• nth-child 对父元素里面所有的子元素排序 先找到第 N 个孩子 然后看是否匹配
• nth-of-type 对父元素里面指定子元素进行排序下选择 先匹配 再找到E 元素的第N个
• 类选择器、属性选择器、伪类选择器的权重都为10

伪元素选择器

伪元素选择器可以利用CSS 创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	说明
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• before 和 after 创建一个元素， 属于行内元素
• 伪元素和标签元素一样， 权重为 1
• 必须有content属性
• before 在父元素内容的前面创建元素 ， after 在父元素内容的后面插入元素
• 创建的元素在文档书中找不到

 div:hover::before {
 	position: absolute;
 	right: 0;
 	top: 0;
 	content: '\e91e';
 	font-size: 20px;
 }

清除浮动

 .clearfix:after {
 	content: "";
 	display: block;
 	height: 0;
 	clear: both;
 	visibility:hidden;
 }

闭合

 .clearfix:before,clearfix:after {
 	content: "";
 	display: table;
 }
  .clearfix:after {
  	clear: both;
  }

背景大小

background-size

取值	场景
数字+px	指定 宽 高
百分比	相对与当前盒子的宽高比例
contain	包含，等比例缩放 不会超过盒子 但是会有留白
cover	覆盖，等比例缩放 刚好填满整个盒子

连写

background: url() no-repeat center center /size

CSS3盒子模型

box-sizing

指定盒子模型 box-sizing: content-box | border-box

content-box 盒子大小为 width + padding + border 默认的值

border-box 盒子大小为 width

filter

模糊处理

filter: blur(15px)

数值越大 图像越模糊

calc

计算css属性值

width:calc(100%-80px);

括号内可以使用 + - * / 来进行计算

CSS3过渡

transition: 要过度的属性 花费的时间 运动曲线 何时开始

1. 属性： 想要变化的 css 属性 ， 可以写 all ，多个属性用逗号进行分割
2. 时间： 带单位 s
3. 运动曲线： ease 默认
4. 何时开始： s

div {
    width: 200px;
    height: 200px;
    background-color: red;
    transition: all 1s;
}
div:hover {
    width:800px;
    background-color: yellow;
}