属性选择器
-
属性选择器
button[disabled]{ //选择的是 即是button 又有disabled 这个属性的元素 权重高于标签选择器 cursor: default; } button[disabled="disbaled"]{ cursor: default; } button[disabled^="dis"]{ //以某个值开通 cursor: default; } button[disabled$="led"]{ //以某个值结尾 cursor: default; } button[disabled*="l"]{ //包含某个值 cursor: default; } <button disabled="disabled">按钮</button>
结构伪类选择器
-
结构伪类选择器
属性选择器 和 结构伪类选择器 和类选择器 权重一样 10
ul li:first-child{ //第一个
background-color: #pink;
}
// nth-child 选择父元素里面的第几个孩子 不管里面孩子是否同种类型
ul li:nth-child(8){ // 自定义第x个 nth-child(x)
background-color: #pink;
}
ul li:nth-child(even){ // 偶数
background-color: #pink;
}
ul li:nth-child(odd){ //奇数
background-color: #pink;
}
ul li:nth-child(2n){ //自定义公式 n从0开始加 2n偶数 2n+1奇数
background-color: #pink;
}
ul li:last-child{ //最后一个
background-color: #deeppink;
}
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
of-type
div span:nth-child(2){//必须写2才能选择 写1无效
background-color:#pink;
}
div span:first-of-type { //指定类型元素第一个
background-color: #purple;
}
div span:nth-of-type(n) { //指定类型元素第n个 也可n作为公式
background-color: #purple;
}
div span:last-of-type { //指定类型元素最后一个
background-color: #purple;
}
<div>
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
- ul 里面只允许放 li 所以nth-child 和 nth-of-type 就一样了
伪元素选择器
- 伪元素选择器
div {
width : 300px;
height: 300px;
border: 1px solid #pink;
}
div::before {
content: "我"
display:inline-block; //默认是行内元素 没有大小 所以要转化
width:100px;
height: 100px;
background-color: #pink
}
div:: after {
content: "小猪佩奇"
display:inline-block;
width:100px;
height: 100px;
background-color: #pink
}
<div>是</div>
定义图标
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
p::after {
content: '\ea50'; //写对应的编码 则无需复制图标
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
}
2D转换 (transform)
-
2D转换 (transform)
移动 translate
div { width: 200px; height: 200px; background-color:#pink; transform:translate(100px,100px); transform:translate(100px,0); //只移动x transform:translateX(100px);//只移动x transform:translateY(100px);//旋转只移动Y }
旋转 transform: rotate(xxdeg)
img {
width:150px;
transform: rotate(45deg); //顺时针旋转45度
}
设置旋转中学点 transform-origin : left bottom // 默认是 50% 50% = center center
缩放 transform: scale(x,y)
div {
transform: scale(2,1) //数字代表倍数
transform: scale(0.5)
}
- 综合性写法 transform: translate(x px, x px ) rotate(15deg) scale(1.2) (先写位移)
动画
-
动画
//定义动画 @keyframes move(动画名) { 0% { //开始 也可以用from transform: translateX(0px); } 100% { //结束 也可以用to transform: translateX(1000px); } } //动画序列 可以做多个状态变化 %是总的时间划分 @keyframes move2(动画名) { 0% { transform: translateX(0px); } 25% { transform: translate(1000px,0); } 50% { transform: translate(1000px,500px); } 75% { transform: translate(0px,500); } 100% { transform: translate(0,0); } } div { width: 200px; height: 200px; background-color: pink; //调用动画 animation-name: move; //持续时间 animation-duration: 2s; }
动画属性
div { width:100px; height: 100px; background-color: pink; //动画名称 animation-name: move; //持续时间 animation-duration: 2s; //运动曲线 animation-timing-function:ease; //默认 //何时开始 延迟 animation-delay: 1s; //播放次数 默认1次 animation-iteration-count:infinite; //无限次 //逆向播放 默认是normal animation-direction:alternate; //来回播放 //结束后的状态 默认是backward 返回起始状态 animation-fill-mode:forwards; //停留在结束状态 //动画是否运行或者停止 默认是running animation-play-state:paused; //停止 }
动画简写 animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态 ,
//前2个属性 不能省略 其他省略就是默认值 animation: myfirst 2s linear 2s infinite alternate animation: move 2s linear 0s 1 alternate forwards; animation: move 2s linear 0s 1 alternate forwards;
3D转换
-
3D转换
3D移动 translate3d(x,y,z)
div { transform:translateX(100px) translateY(100px) translateZ(100px); //trnaslateZ 单位一般跟px transform: translate3d(x,y,z); //简写 z是向外移动 为正值 transform: translate3d(0,100px,100px); }
透视 perspective (近大远小)
body { //透视写在被观察元素的父盒子上面 perspective: 500px; //数值越小看得越大 }
**3D旋转 rotate3d**
div {
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: totate3d(x,y,z,deg); //自定义旋转,deg为角度
transform: totate3d(1,1,0,deg);//对角线 矢量
transform: totate3d(1,0,0,deg);// 沿着x轴
}
**左手准则:**
- 左手的手拇指指向x轴正方形
- 其余手指弯曲方向就是该元素沿x轴旋转方向
3D呈现 transform-style:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200414223320185.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0VEVDc3Nw==,size_16,color_FFFFFF,t_70)
浏览器私有前缀
- 浏览器私有前缀
- -moz- :代表firefox浏览器私有属性
- -ms- :代表ie浏览器私有属性
- -webkit- : 代表safari,chrome私有属性
- -o- : 代表Opera 私有属性
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;