首页 > 代码库 > css3 新属性

css3 新属性


一 选择器
1 兄弟选择器 0
以第一个选择器开始,往后找满足条件的兄弟节点
class~class()
<-- lorem+数字 -tab --> 可以输出默认文字
2 属性选择器
标签[attr]
标签[attr=某个具体值]
标签[attr^=某个具体值开头]
标签[attr$=某个具体值结尾] li[]
标签[attr*=属性中包含的某个值] li[]
标签[attr | =-前的第一个值] 属性中以-进行分割
二 伪类选择器

1 attr:nth-child(index)

attr:nth-child(n) 获取所有项
attr:nth-child(2n) 获取所有偶数项
attr:nth-child(2n-1) 获取所有奇数项
2
attr:first-child
attr:last-child

扩充小知识: ul>li{$}*30 ( 标签快速写法)

注意:索引值是以所有的兄弟节点进行计算,不分标签种类,通通按索引值来

:not([选择器]) 找到所有 不是price属性的标签
:not([选择器=‘18‘]) 找到所有price属性不等于18的标签

(h2#title${标题$}+p)*4
[href=http://www.mamicode.com/‘title$‘]

3 锚节点,作为锚元素可单独设置样式k
attr:target

4 伪元素before 和after
给双标签添加子元素时:
1 ,必须添加content属性, 2 默认为行内元素, 3 若想给宽高,需变为块display:block; 或者position定位
div::before {
content:‘‘;
}

5 text文本
首字母(下沉) 阿拉伯语言从右到左
attr::first-letter
首行
attr::first-line
选中的文字
attr::selection {
text-shadow //字体阴影
}
6 placeholder
-webkit- 谷歌
-ms- 微软
-moz- 火狐
-o- opera
添加前缀
时机:没有效果
需要兼容多个浏览器

7 边框阴影
box-shadow :insert(可选 影子的方向) x方向 y方向 影子模糊程度 扩充影子大小 颜色;
(添加多个,使用逗号分隔)

8 文字阴影
text-shadow : x方向 y方向 影子模糊程度 颜色;
(添加多个,使用逗号分隔)

9 颜色的设置
rgb(255,100,97) 桃红色 使用滴管工具
hsl()
rgba 和 hsla 不受透明度影响

直接设置透明:(纯透明)
">
10 圆角
border-radius : 0 0 0 0 ;
四个值分别为 :左上 右上 右下 左下

11 盒子模型
box-sizing //可以让我们的盒子保证自己的大小作为第一优先级
box-width
12 旋转
deg 角度
transform:rotate(-30deg);
移动
transform:translate(0px ,-10px);
缩放
transform:scale(2,1); //x方向改变倍数 y方向
扭曲
transform:skewX(-45deg); X方向扭曲值

13 缓慢过渡 
transition: all 1s;

css3 新属性