选择器
基本选择器
- E
- .class
- #id
- E F
- E > F //只能选择某个元素的直接子元素,不包含孙子元素以及往后的元素
- E + F //F在E的后面并且相邻,是选择E后面的相邻兄弟元素
ul li + li
<ul>
<li></li>
<li></li> *
<li></li> *
<li></li> *
<li></li> *
</ul>
- E ~ F //通用兄弟选择器
ul li ~ li 2和5
ul li + li 2
<ul>
<li></li>
<li></li>
<a></a>
<a></a>
<li></li>
</ul>
属性选择器
E[attr]
只要有attr属性,不管有没有值都会被选中
E[attr="value"]
必须有attr属性,值必须是value
最好加引号,如果不加则要符合css标识规范
E[attr^="value"]
a[href^="http://"]
以http://开头的所有a都会被选中
E[attr$="value"]
img[src$=".png"] 以.png结尾都会被选中
E[attr="value"]*
包含value
E[attr~="value"]
如果属性值包含很多的单词,并且这些单词是以空格隔开的话,以此方式进行选择
<a title="hello world"></a>
a[title~="hello"]
E[attr|="value"]
<div lang="zh-cn"></div>
div[lang|="zh"]
伪类和伪元素选择器
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nth p:nth-child(2){
color: red; //必须是.nth第一个元素且必须是p标签
}
.nth p:nth-of-type(2){
color: blue;//先去找p标签,然后再找第一个p
}
.nth p:empty{
color:green;
}
.nth:not(p){
font-weight:bold;
}
</style>
</head>
<body>
<div class="nth">
<div>div</div>
<p>p</p>
<p>p</p>
<p></p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</body>
</html>
伪元素可以写一个或两个冒号
圆角
border-radius
如果需要设定四个值,从左上开始顺时针
border-radius:30px 50px 70px 100px;
盒阴影
box-shadow: h-shadow v-shadow blur spread color inset
box-shadow:10px 10px 10px 0 red outset;
水平方向偏移量 竖直方向偏移量 模糊 扩展 颜色 内外阴影
边界图片
border-image: source slice width outset repeat
要使用的图像 缩放 宽度 外部绘制的量 重复属性
border-image:url('border.jpg')
背景
background-clip
指定背景绘制区域
background-clip:border-box|padding-box|content-box
background-origin
背景图像定位,指定background-position属性应该是相对位置
background-origin:border-box|padding-box|content-box
background-size
指定背景图像大小
background-size:length|percentage|cover|contain
background-size:100%; //只设定第一个值时,第二个值根据图片宽度值等比缩放
background-size:100px; //指定大小同理
background-size:cover; //将背景图片等比缩放以填满整个屏幕
background-size:contain //将背景图片等比缩放至某一边紧贴容器边缘为止
多重背景图像
background-image:url(img.jpg),url(img2.png);
背景属性整合
background:color position size repeat origin clip attachment image
渐变
线性渐变
background: linear-gradient(direction,color-stop1,color-stop2,...) //默认从上到下
background: linear-gradient(to right,red,blue); //从左到右.标准写法
使用角度更好
//0deg创建从上到下的渐变,90deg将创建一个从左到右的渐变
background: linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));
image.png
转换
Transform
让元素在一个坐标系统中变形,这个属性包含一系列变形函数,可以移动,旋转和缩放元素
2D转换
- rotate() 旋转
- translate() 平移
- scale() 缩放
- skew() 扭曲或斜切
- matrix() 矩阵或混合
transform:rotate(angle)
angle指旋转角度,正数顺时针,负数逆时针
transform:rotate(30deg);
transform:translate(x,y)
transform:translateX(x)
transform:translateY(y)
transform:translate(300px,100px);
transform:scaleX(x)
transform:scaleY(y)
transform:scale(x,y)
transform:scaleX(.5);
**skewX(x)
skewY(y)
skew(x,y)
**
transform:skew(20deg,20deg);
3D转换
- rotate3d()
- translate3d()
- scale3d()
- matrix3d()
- perspective()
屏幕快照 2017-06-06 下午10.21.40.png
transform:rotateX(angle)
transform:rotateY(angle)
transform:rotateZ(angle)
transform:rotate3d(x,y,z,angle)
前三个参数分别表示旋转的方向x,y,z,第四个参数表示旋转的角度,参数不允许省略
transform:rotate3d(.1,1,1,45deg);
x,y,z只有0和非0的区别,如果是0没有变化,如果都是非0的状态时,会根据大小(不超过1)来反映出程度.-1代表逆时针,1代表顺时针
transform:translateZ(z)
transform:translate3d(x,y,z)
transform:translate3d(200px,200px,200px);
transform:scaleZ(z)
transform:scale3d(x,y,z)
transform:scale3d(1.5,1.5,1.5); //参数不能省略
Transform与坐标系统
transform-origin:x-axis y-axis z-axis
允许更改转换元素的位置
transform-origin:left top;
扩展属性
transform-style:flat | preserve-3d;
指定嵌套元素是怎样在三维空间中呈现
perspective属性
指定观察者[z=0]平面的距离,使具有三维位置变换的元素产生透视效果
perspective:100px;
perspective-origin:top; //视角的角度
backface-visibility:visible | hidden
指定元素背面面向用户时是否可见
网友评论