h5c3内容03
h5c3内容03
css3的现状
浏览器支持程度较差，需要添加私有前缀。
选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
div 标签选择器
.box 类选择器
#box id选择器
div>.box 子代选择器
div .box 后代选择器
div.box 交集选择器
div,.box 并集选择器
*通配符选择器
!important
div+p 选择div后面的第一个p标签
div~p 选择div后面所有的p标签
css3新增选择器
属性选择器
div[title]选择带有title属性的div。
div[title=”aabb”]选择带有title属性的div,并且title的属性值为aabb。
^:开头 $:结尾 *:通配
div[title^=”aa”]选择带有title属性的div,并且title属性以aa开头。
结构伪类选择器:通过结构进行筛选
li:first-child–选中li标签父盒子下面的第一个子元素
li:last-child–选中li标签父盒子下面的最后一个子元素
li:nth-child(9)–选中li标签父盒子下面的第9个子元素。(非索引)
li:nth-child(odd)–选中li标签父盒子下面的所有奇数子元素。(非索引)
li:nth-child(even)–选中li标签父盒子下面的所有偶数子元素。(非索引)
li:nth-child(n)–(n表示从0开始的正整数)
li:nth-child(2n)–(偶数)
li:nth-child(2n+1或-1)–(奇数)
li:nth-child(-n+5)–(奇数)选中li标签父盒子下面的前五个子元素
li:nth-last-child(3)–选中li标签父盒子下面的倒数第三个子元素
注意:选择元素时是分类型的,选择的元素必须和我们指定的元素类型一致,否则选择无效。
:empty伪类 当元素为空时会被选中
div:empty–当div为空时会被选中(空格不为空)
:target伪类 表示标签被激活时的状态，必须配合锚点使用
h2:target–表示h2被激活时的状态
:not 排除指定的标签
div:not(.box3)–排除类名为.box3的div
伪元素
用css3模拟出标签的效果
默认行内显示模式
伪元素必须有content属性
::before,::after
span::before{
content:"今天";
}
span::after{
content:"不错";
}
伪元素选择器
div::first-line–选中div中的第一行元素
div::first-letter–选中div中的第一个字
div::selection–改变选中区域的样式
文字阴影
text-shadow:阴影水平位移 阴影水平位移 阴影模糊程度 阴影颜色
RGBA
R:red G:green B:blue A:alpha:透明度(取值0-1)
opacity–透明度会直接影响元素
transparent–透明色，无法改变透明度
HSLA
H:色调(0-360) S:饱和度(0-100%) L:明度(0-100%) A:alpha 透明度(0-1)
Css3盒子模型and盒模型
css2盒模型:盒子最终宽度=内容的宽度+padding+border
box-sizing:border-box 內减模式(盒模型)
border-box:意味着width,height设置了盒子最终的大小的宽高,如果再给盒子设置padding值和border,不会再撑大盒子,只会减小放内容的区域(手动设置的宽高是非常稳定的)。
box-sizing:content-box 外加模式(盒子模型)
content-box:意味着我们设置了放内容区域的大小,此时再给盒子设置padding和border只会撑大盒子。
私有化前缀
-webkit-linear-gradient(left,yellow,red);兼容谷歌的私有前缀
-ms-linear-gradient(left,yellow,red);兼容ie的私有前缀
-moz-linear-gradient(left,yellow,red);兼容火狐的私有前缀
-o-linear-gradient(left,yellow,red);兼容欧朋的私有前缀
过渡transition
transition-property:过渡属性
transition-duration:过渡持续时间
transition-delay:过渡延迟
transition-timing-function:运动曲线 linear:匀速 ease-in:加速 ease-out减速 ease-in-out:先加速后减速
transition:all 1s 1s linear 所有属性都会在1秒后匀速运动1秒
过渡属性通常加给元素本身