目录
2.text-overflow:指定当文本溢出时包含它的元素的形式
0x00 CSS3新增选择器
1.ele1~ele2:表示匹配ele1之后的每一个ele2。ele1和ele2必须在同一个父元素下
注：搜狗输入”波浪线“可以打出~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1~p{
color:red;
}
</style>
</head>
<body>
<div>
<h1>HTML5</h1>
<p>css3</p>
<p>js</p>
</div>
</form>
</body>
</html> 2.标签名[attribute^=value]匹配元素属性以指定value值开头的元素
3.标签名[attribute$=value]匹配元素属性以指定value值结尾的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1~p{
color:red;
}
p[class^='head']{
color:green;
}
p[class$='2']{
background:black;
}
</style>
</head>
<body>
<div>
<h1 class="head1">HTML5</h1>
<p class="head2">css3</p>
<p class="foot2">js</p>
</div>
</form>
</body>
</html> 4.标签名[attr*=value] 匹配元素属性包含指定value值的元素
5.元素:first-of-type 匹配的元素是其父元素的第一个子元素
6.元素:last-of-type 匹配的元素是其父元素下最后一个子元素
7.el:only-of-type 匹配的元素是其父元素下唯一的子el元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:first-of-type{
color:red;
}
p:last-of-type{
color:green;
}
span:only-of-type{
color:yellow;
background:black;
}
</style>
</head>
<body>
<div>
<h1 class="head1">HTML5</h1>
<p class="head2">css3</p>
<span>php</span>
<p class="foot2">js</p>
</div>
</form>
</body>
</html> 8.标签:only-child 匹配属于父元素中的唯一子元素的元素
9.标签el:nth-child(n)匹配父元素中的第n个子元素，子元素不是el元素则不生效
n可以是数字，关键字或者公式
10.el:nth-last-child(n)匹配父元素中的倒数第n个子元素，子元素不是el元素则不生效
11.el:nth-last-of-type(n)匹配父元素中同类型的倒数第n个子元素，n可以是数字，关键字或者公式
12.el:last-child匹配父元素中最后一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
h1:only-child{
color:red;
}
p:nth-child(2){
color:green;
}
</style>
</head>
<body>
<div>
<div>
<h1 class="head1">HTML5</h1>
</div>
<div>
<p>c++</p>
<p>python</p>
</div>
<div>
<span>php</span>
<p class="head2">css3</p>
<p class="foot2">js</p>
</div>
</div>
</form>
</body>
</html> 13.:root匹配文档的根元素，该选择器等同于html(在html文档中根元素就是html)
14.el:empty 匹配每个没有任何子集的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root{
background:black;
}
p:empty{
width:100px;
height:100px;
background:greenyellow;
}
</style>
</head>
<body>
<p></p>
</body>
</html> 15.:target 匹配当前活动的target元素的样式
a标签锚链接的用法
https://www.jianshu.com/p/361968442a2c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:target{
background:yellow;
}
</style>
</head>
<body>
<a href="#html5">html5</a>
<a href="#css3">css3</a>
<div id="html5">点击了html5</div>
<div id="css3">点击了css3</div>
</body>
</html> 当点击html5时，当前活动的target元素就是id=html5的标签
16.el:enabled匹配每个启用的元素(主要用于表单元素)
17.el:disabled匹配每个禁用的元素(主要用于表单元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input[type="text"]:enabled{
border:1px solid green;
}
input[type="text"]:disabled{
border:1px solid red;
}
input[type="password"]:disabled{
border:1px solid red;
}
</style>
</head>
<body>
<form action="">
用户名:<input type="text" enabled>
密码:<input type="password" disabled>
</form>
</body>
</html> 18.el:checked 匹配每个选中的input元素（仅适用于单选按钮和复选框）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:checked~label{
color:green;
}
</style>
</head>
<body>
<form action="">
<div><input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">male</label></div>
<div><input type="radio" name="sex" id="female" value="female" ><label for="female">female</label> </div>
</form>
</body>
</html> 19:not(选择器)匹配除了指定 选择器元素的其他元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:checked~label{
color:green;
}
:not(#male){
background:black;
}
</style>
</head>
<body>
<form action="">
<div><input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">male</label></div>
<div><input type="radio" name="sex" id="female" value="female" ><label for="female">female</label> </div>
</form>
</body>
</html> 20. ::selection匹配被用户选中或处于高亮状态的元素
该选择器只可以应用于少数的css属性：color，background，cursor和outline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
::selection{
color:red;
background:green;
}
</style>
</head>
<body>
<p>hello world</p>
<p>talk is cheap,show me the code</p>
<p>php is the best language all over the world</p>
</body>
</html> 
21.el:out-of-range匹配值在指定区间外的input元素
22el:in-range匹配值在指定区间内的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:out-of-range{
border:1px solid red;
}
input:in-range{
border:1px solid green;
}
</style>
</head>
<body>
<label for="number">数学成绩:</label><input type="number" id="number" min="0" max="150" autofocus>
</body>
</html> 
23.el:read-wirte匹配可读及可写的元素
24.el:read-only匹配设置了readonly属性的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:read-only{
border:1px solid blue;
color:red;
background:blue;
}
input:read-write {
border:1px solid green;
background:green;
}
</style>
</head>
<body>
<label for="number">数学成绩:</label><input type="text" id="number" min="0" max="150" autofocus>
<label for="chinese">语文成绩:</label><input type="text" id="chinese" value="123" readonly>
</body>
</html> 25.el:optional匹配可选的输入元素
optional选择器只适用于表单元素:input select 和textarea
26.el:required匹配设置了required属性的元素
optional选择器只适用于表单元素:input select 和textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:optional{
border:1px solid blue;
color:red;
background:blue;
}
input:required{
border:1px solid green;
background:green;
}
</style>
</head>
<body>
<label for="number">数学成绩:</label><input type="text" id="number" min="0" max="150" autofocus>
<label for="chinese">语文成绩:</label><input type="text" id="chinese" value="123" required>
</body>
</html> 27el:valid匹配输入值为合法的元素
valid选择器只作用于能指定区间值的元素，例如input元素中的min和max属性，以及正确的email字段，合法的数字字段等。
28.el:invalid匹配输入值为非法的元素
0x01 CSS3新增的用户界面属性
1、resize属性规定是否可以调整元素的尺寸：
none：无法调整元素的尺寸
both:可以调整元素的高度和宽度
horizontal:只可以调整宽度
vertical:只可以调整高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#a{
resize:none;
}
#b{
resize:vertical;
border:1px solid green;
/* 加上该属性div元素也能调整宽和高 */
overflow:auto;
height:100px;
}
</style>
</head>
<body>
<textarea name="" id="a" cols="30" rows="10"></textarea>
<div id="b"></div>
</body>
</html> 2、box-sizing 改变盒子模型
content-box 默认值，正常的盒子模型，padding和border不计入width和height内
border-box 怪异的盒子模型 padding和border计入width和height内
inherit:表示继承父元素的盒子模型
注意：不同的浏览器修改盒子模型需要在box-sizing之前加上前缀
3.outline-offset 设置轮廓框架在border边缘外的偏移
outline和border的区别：
outline不占用空间
outline可以使非矩形的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
float:left;
border:10px solid red;
/* 在border外加上一层outline */
outline:10px solid green;
/* 还可以设置outline相对于border的偏移 */
outline-offset:20px;
height:100px;
width:100px;
margin:100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html> 
0x02 CSS3 常用的样式属性边框与盒阴影
1.CSS3圆角属性:border-radius
border-radius属性每个半径四个值的顺序分别是左上角，右上角，右下角，左下角
椭圆的水平半轴/椭圆的垂直半轴
画一个椭圆：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
float:left;
border:1px solid red;
/* 水平半轴是宽度的一半，垂直半轴是高度的一半 */
border-radius:50px/100px;
width:100px;
height:200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 2.CSS3盒阴影属性box-shadow:
被用来添加阴影
box-shadow:h-shadow v-shadow blur spread color insert;
h-shadow:必须的，水平阴影的位置，允许负值
v-shadow:必须的，垂直阴影的位置，允许负值
blur:可选，模糊距离。
spread:可选，阴影的大小，表示在原来的基础上扩展的大小。
color:可选，阴影的颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border:1px solid red;
/* 水平位移 垂直位移 模糊距离 阴影大小 阴影颜色 */
box-shadow:10px 10px 2px 5px green;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> inset:可选，阴影向内扩散。
3.css3图片边框属性
border-image:指定一个图片作为边框
border-image:图片地址 切割大小 /【图片边框的宽度】【 定义边框图片向外偏移的宽度】 【用于设置图像边界是否重复：repeat重复，拉伸stretch 铺满：round】
1.切割大小：可以分别设置
距离上边界切割的距离
距离右边界切割的距离
距离下边界切割的距离
距离左边界切割的距离
2.图片边框的宽度 默认和 border:15px solid transparent 中的宽度即15px保持一致的，可以不设置。
如果设置为20px，则会向内再扩展5px（会占据content），更新为20px.
3.向外偏移的宽度：默认向外偏移的宽度为0，即和边框重合，如果设置为15px，则图片边框距离边框内侧的距离是15px；
因为图片是81X81的所以设置切割距离为81/3=27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border:15px solid transparent;
width:200px;
height:200px;
border-image:url('border.png') 27 / 20px / 15px round;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 0x03 CSS3背景新特性
1.background-image 添加背景图片
可添加多个背景，每张图片用逗号隔开，前面的图片会绘制在后面的图片上
2.background-size 设置背景图片的大小
length方式：指定图片大小像素值
百分比方式：相对于父元素的百分比
cover 表示背景图片完全覆盖背景区，图片自动伸缩。
contain 按图片原有比例，把整张图片在背景区显示出来
3.background-orign:指定背景图片的位置
可传的值
border-box：将背景图片左上角从border区域开始绘制
padding-box：默认值，背景图片左上角从padding区域开始绘制，至于绘制到什么位置看clip属性
content-box:背景图片左上角从content区域开始绘制
注意：
当使用background-attachment为fixed时，该属性忽略不计
4.background-clip：指定从哪个位置开始绘制
可传的值如下：
border-box 默认值，背景延伸至边框外沿（但是在边框下层）
padding-box背景延伸至内边距外沿，不会绘制到边框处
content-box:背景被剪裁到内容区外沿
text:背景被剪裁成文字的前景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border:15px solid transparent;
width:200px;
height:200px;
border-image:url('border.png') 27 / 15px / 15px round;
/* background-image:url('border.png'),url("2.jpg"); */
background-image:url('2.jpg');
/* background-size:200px 200px; */
/* background-size:100% 100%; */
/* background-size:contain; */
background-size:cover;
/* background-origin:border-box; */
background-origin:content-box;
background-clip:content-box;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 0x04精灵图片的使用
其实就是从一张图片中扣出一部分来显示
background-position:x y 设置图片左上角在背景区的坐标
只要限制背景区的大小，然后移动图片，让想要扣出来的部分在被背景区显示出来即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:27px;
height:27px;
background-image:url('border.png');
background-repeat:no-repeat;
background-position:-27px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
0x05 渐变背景
1.标准语法：
background:linear-gradient(direction,color-stop1,color-stop2,...)
direction:渐变方向，默认情况是从上到下
注意：
标准语法中direction指渐变的末尾位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
/* background:linear-gradient(black,white); */
background:linear-gradient(to right,black,white);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 其他浏览器前缀语法，direction值渐变的起始位置。例如：
background:-webkit-linear-gradient(top,red,green);
还可以指定每种颜色开始渐变的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
/* background:linear-gradient(black,white); */
background:linear-gradient(to right,red 10%,orange 50%,yellow);
/* 为了兼容各版本浏览器加上的代码，其实不加也可以兼容 */
background:-webkit-linear-gradient(left,red 10%,orange 50%,yellow);
background:-moz-linear-gradient(left,red 10%,orange 50%,yellow);
background:-o-linear-gradient(left,red 10%,orange 50%,yellow);
background:-ms-linear-gradient(left,red 10%,orange 50%,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
2.角度渐变:
标准语法0度指向北（从下向上渐变），其他浏览器前缀语法0deg指向东。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
/* background:linear-gradient(black,white); */
background:linear-gradient(0deg,red 10%,orange 50%,yellow);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 3.重复线性渐变：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:100px;
height:100px;
background:repeating-linear-gradient(0deg,red,orange 10%,yellow 20%);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
4.径向渐变：
background:radial-gradient(shape size at position,color1,color2,...)
1.shape:可选，
默认为椭圆ellipse
circle
2.size:定义渐变的大小
farthest-corner(默认) 指定径向渐变的半径长度从圆心到离圆心最远的角
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边
3.position:定义渐变的位置
center(默认)：设置 中间为径向渐变圆心的纵坐标
top:设置顶部为径向渐变圆心的纵坐标值
bottom:设置底部为径向渐变圆心的纵坐标值
注意：前三个参数之间没有逗号！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
height:100px;
background:radial-gradient(circle farthest-corner at top,red 10%,orange 50%,yellow 70%);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 5.重复径向渐变
repeating-radial-gradient()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
height:100px;
background:repeating-radial-gradient(circle farthest-corner at top,red 10%,orange 20%,yellow 30%);
}
</style>
</head>
<body>
<div></div>
</body>
</html> 
0x06 css3文本效果及特殊字体的引入
1.text-shadow：给文本添加阴影效果
text-shadow:h-shadow v-shadow blur color
h-shadow 必需。水平阴影的位置，可以负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选 阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
background:black;
}
html,body{
position:relative;
width:100%;
height:100%;
}
div{
width:300px;
height:50px;
position:absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-25px;
text-shadow:2px 2px 2px green;
color:green;
text-align:center;
}
</style>
</head>
<body>
<div>
Talk is cheap,show me the code;
</div>
</body>
</html> 2.text-overflow:指定当文本溢出时包含它的元素的形式
text-overflow:clip|ellipsis|string
clip: 修建文本
ellipsis 显示省略号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本(只在firefox有效)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
/* 对于溢出的处理 */
overflow:hidden;
white-space:nowrap; /* 禁止换行 */
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
text-overflow:指定当文本溢出时包含它的元素的形式
text-overflow:clip|ellipsis|string
clip: 修建文本
ellipsis 显示省略号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本
</div>
</body>
</html> 3.word-wrap:允许内容在过长情况下可以自动换行
word-wrap:normal | break-word
normal 只允许在断字点换行
break-word 在长单词或url地址内部进行换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
/* 对于溢出的处理 */
overflow:hidden;
word-wrap:break-word;
/* word-wrap:normal; */
}
</style>
</head>
<body>
<div>
this is a long worddddddddddddddddddddddddddd;
</div>
</body>
</html> 
4.word-break：指定内容的断行规则
normal：使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
width:200px;
/* 对于溢出的处理 */
overflow:hidden;
word-wrap:break-word;
word-break:break-all;
/* word-wrap:normal; */
}
</style>
</head>
<body>
<div>
this is a long worddddddddddddddddddddddddddd;
</div>
</body>
</html> 5.@font-face规则：定义自己的字体
首先定义字体的名称（比如：myFirstFont）然后指向该字体文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 定义字体 */
@font-face{
font-family:myFont;
src:url("Dexsar.ttf");
}
div{
width:200px;
/* 对于溢出的处理 */
overflow:hidden;
word-wrap:break-word;
word-break:break-all;
/* 使用字体 */
font-family:myFont;
}
</style>
</head>
<body>
<div>
this is a long worddddddddddddddddddddddddddd;
</div>
</body>
</html> 0x07 CSS3的多列布局
column-count 指定了需要分割的列数
column-gap 指定了列与列间的间隙大小
column-rule-style 指定了列与列之间的边框样式solid dashed
column-rule-width 指定了两列的边框厚度
column-rule-color:指定了两列的边框颜色
column-rule是column-rule-*的简写
column-rule:1px solid green;
column-width:指定列的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
column-count:3;
column-gap:40px;
column-rule-style:dashed;
column-rule-width:2px;
column-rule-color:grey;
}
</style>
</head>
<body>
<div>
月溅星河，长路漫漫，风烟残尽，独影阑珊；谁叫我身手不凡，谁让我爱恨两难，到后来，肝肠寸断。幻世当空，恩怨休怀，舍悟离迷，六尘不改；且怒且悲且狂哉，是人是鬼是妖怪，不过是，心有魔债。叫一声佛祖，回头无岸，跪一人为师，生死无关；善恶浮世真假界,尘缘散聚不分明，难断！我要这铁棒有何用，我有这变化又如何；还是不安，还是氐惆，金箍当头，欲说还休。我要这铁棒醉舞魔，我有这变化乱迷浊；踏碎灵霄，放肆桀骜，世恶道险，终究难逃。梦醒太晚！这一棒，早已灰飞烟灭…...
</div>
</body>
</html> 0x08 设备兼容必备知识多媒体查询
使用多媒体查询可以在指定的设备上使用对应的样式替代原有样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 大于480px的时候 */
@media screen and (min-width:480px) and (max-width:600px){
body{
background:red;
}
}
/* 大于600px且小于900px */
@media screen and (min-width:600px) and (max-width:900px){
body{
background:green;
}
}
</style>
</head>
<body>
<div>
月溅星河，长路漫漫，风烟残尽，独影阑珊；谁叫我身手不凡，谁让我爱恨两难，到后来，肝肠寸断。幻世当空，恩怨休怀，舍悟离迷，六尘不改；且怒且悲且狂哉，是人是鬼是妖怪，不过是，心有魔债。叫一声佛祖，回头无岸，跪一人为师，生死无关；善恶浮世真假界,尘缘散聚不分明，难断！我要这铁棒有何用，我有这变化又如何；还是不安，还是氐惆，金箍当头，欲说还休。我要这铁棒醉舞魔，我有这变化乱迷浊；踏碎灵霄，放肆桀骜，世恶道险，终究难逃。梦醒太晚！这一棒，早已灰飞烟灭…...
</div>
</body>
</html> 