选择器+边框与圆角+配景与渐变
section > div直接子元素选择器
div + article相邻兄弟选择器（在元素之后呈现）
div ~ article通用兄弟选择器（在元素之后呈现）
属性选择器：
a[href] { text-decoration: none; } a[href="#"] { color: #f00; } /*包罗two且属性值用空格分隔断绝分手：*/ a[class~="two"] { color: #ff0; } /*属性的第一个值以#开头：*/ a[href^="#"] { color: #0f0; } /*以#结尾：*/ a[href$="#"] { color: #00f; } /*包罗#：*/ a[href*="#"] { color: #0ff; } /*第一个属性值以#-开头：*/ a[href|="#"] { color: #f0f; }
UI元素伪类：
Input:disabled
Input:enabled
Input:checked
div:first-child匹配属于其父元素的第1个子元素且是div，计数时不分类型，显示时分类型
div:last-child匹配属于其父元素的最后1个子元素且是div，计数时不分类型，显示时分类型div:nth-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型div:nth-lat-child(2) 匹配属于其父元素的第n个子元素且是div，计数时不分类型，显示时分类型
n匹配下标，，从0开始计算：
li:nth-child(2n) 双数
li:nth-child(2n+1) 单数
li:nth-child(n+4)
li:nth-child(odd) 奇数，下标从1开始计算
li:nth-child(even) 偶数，下标从1开始计算
li:nth-last-child(3) 倒数第3个
article:only-child 属于父元素的独一元素，且是article(没有任何其他子元素)
div:nth-of-type(2) 匹配属于其父元素的第2个子元素且是div，计数时分类型
div:nth-last-of-type(2)
div:first-of-type div:last-of-type
article:only-of-type 属于父元素的独一article元素（可以有其他类型的子元素）
div:empty 没有子元素的div元素（包孕文本也没有）
a:not(:last-of-type) 不是最后一个a子元素
id选择器权重大于属性选择器
.red > [class=”red”]
Css伪元素：
div::selection 文本当选中后的样式
::-moz-selection 火狐
Css3边框与圆角：
四个值凭据顺时针标的目的来
Border-radius兼容性写法：
-webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;
box-shadow程度偏移 垂直偏移 模糊 扩展 颜色 内部
box-shadow: 50px 30px 0px 0px yellow inset;
border-image-repeat:stretch（拉伸）/repeat（反复）/round（铺满）/initial/inherit
border-image-source: url("border.jpg"); border-image-slice: 50%;/*图像界限向内偏移*/ border-image-width: 50%;/*图像界限的宽度*/ border-image-outset: 2; /*在边框外部绘制*/ border-image-repeat: repeat;
css3配景与渐变：
配景绘制区域（显示范畴）
background-clip: border-box; background-clip: padding-box; background-clip: content-box;
配景图像定位（起始位置，原点位置，与偏移搭配使用）
background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-position:10px 10px; /*与偏移搭配使用*/
background-size只写一个值，第二个默认是auto，按照比例等比缩放
background-size: contain; /*等比缩放到某一边到达容器边沿*/ background-size: cover;/*等比缩放填满容器*/ background-size: 800px 500px; background-size: 800px; background-size: 50% 50%; background-size: 50%; background-size: 100% 100%; background-size: 100%;
background-image多重配景，前面的会笼罩后面的
background-image: url(‘bg2.png‘), url(‘bg1.jpg‘);
demo：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>background-image</title> <style type="text/css"> div{ width:300px; height:300px; background:url(1.jpg) no-repeat center top, url(2.jpg) no-repeat center 100px, url(3.jpg) no-repeat center 200px; margin:0 auto; } </style> </head> <body> <div></div> </body> </html>
默认从上到下渐变：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32665.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")