css3新增选择器
一、字符串匹配属性选择器
元素名[属性="值"],全匹配
元素名[属性^="值"],表示以“值”开头的元素
元素名[属性$="值"],表示以“值”结尾的元素
元素名[属性*="值"],表示匹配包含I值I的元素
元素名[属性~="值"],匹配用空格分隔后,有等于值的元素
二、目标伪类选择器
选中状态下的样式设置:
选择器[type="chekcbox"]:checked{}
禁用状态下的样式设置:
选择器[type="text"]:disabled{}
只读状态下的样式设置:
选择器[type="text"]:read-only{}
三、not伪选择器
#div:not(){}
只要不是(可以跟任何条件)都会被选中
四、结构性伪类选择器
:nth-child系列
原理:必须以父类为选择基准,并且符合以下两个要求:
1. 必须是指定元素
2. 必须是该父元素下所指定的位置(会考虑Body内所有的元素)
first-child{}
last-child{}
only-child{}
:nth-child(值){}:/*值可以是数字,可以是odd:奇数,even:偶数 2n, 3n,4n:对应的倍数*/
示例:
父选择器 p:nth-child(2){}
/* 第二个子元素 且元素为P */
父选择器 p:first-child{}
/* 第一个子元素 且元素 为p */
父选择器 p:last-child{}
/* 最一个子元素 且 元素为p */
:nth-of-type系列
原理: 必须以父类为选择基准,该父元素指定位置的该元素排序,与其他元素无关
first-of-type{}
last-of-type{}
only-of-type{}
nth-of-type(数字|2n){}
示例:
父选择器 p:nth-of-type(2){}
/* 第二个标签为P 的子元素 */
父选择器 p:nth-last-of-type(2){}
/* 倒数第二标签为P 的子元素 */
父选择器 i:only-child{ }
/* 当父元素内,有且仅有唯一的指定元素的时候才有用 */
兄弟素选择器
#p3~span{}
/*指定元素之后的所有相同标签的弟弟元素被选中*/
#p3+span{}
/*指定元素的相邻弟弟元素,且为span*/
子选择选择器
/*子选择器,只能一级级的找,不能跨代*/
#div1>p{}
/*指定元素的子元素为P的,不能跨代*/
after和 before
伪类和伪元素
css3新增属性
一、 transition过渡属性
transition:值;
值:属性 时间 效果 延迟时间
并不是所有属性都有过渡效果,display属性就没有过渡效果
二、transform变换属性
移动:transform:translate();
旋转:transform:rotate();
缩放:transform:scale();
扭曲:transform:skew();
三、动画(可以做更复杂的动效)
第一步:定义动画
定义动画的方式:
1、@keyframes{
from{
}
to{
}
}
2、@keyframes{
0%{
}
20%{
}
…%{
}
100%{
}
}
第二步:使用动画
animation:值;
值:
<' animation-name '>:
检索或设置对象所应用的动画名称
<' animation-duration '>:
检索或设置对象动画的持续时间
<' animation-timing-function '>:
检索或设置对象动画的过渡类型
<' animation-delay '>:
检索或设置对象动画延迟的时间
<' animation-iteration-count '>:
检索或设置对象动画的循环次数
<' animation-direction '>:
检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>:
检索或设置对象动画时间之外的状态
<' animation-play-state '>:
检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式
四、定义字体
定义:
@font-face{
font-family:名称;
url:(字体的路径);
font-style:normal|italic;
}
使用:
标签名{
font-famliy:定义的名称;
font-style:normal|italic;
}
五、圆角
border-radius:大小;
border-radius:左上 右上 右下 左下;
注:当宽、高、圆角相等时,就是一个圆。
六、背景大小
background-size:值;
值:固值|百分比|cover(覆盖,等比缩放,不允许容器中有空白)|contain(背景图片完整显示在容器中,当容器比背景图片大时,会有空白)
注:和background-img结合使用。
七、阴影
box-shadow:值;
值:x轴的偏移 y轴的偏移 模糊值 外延值 颜色 inset(内阴影)
text-shadow:值;
值:x轴的偏移 y轴的偏移 模糊值 阴影颜色
八、渐变(作为值使用)
核心:本质是生成一张图片,应用在background-img。
线性渐变
liner-gradient()
1、渐变方向:top、right、left、bottom或角度deg、从left开始,逆时针旋转。
2、起始颜色、可添加起止位置。
3、终止颜色。
径向渐变
radial-gradient()
background-image:radial-gradient(ellipse at left top, #f00 10%, #ff0 20%, #080 70%);