'CSS3'

选择器

css2选择器
- 基本选择器：
  1. 标记选择器
  2. 类选择器
  3. id选择器
- 复合选择器：
  1. 交集选择器
  2. 并集选择器
  3. 后代选择器
  4. 子选择器
  5. 相邻选择器(E~F E+F)
- 属性选择器
  input[type=”text”]
- 通配符选择器： *
- 伪类选择器
  1. :hover
  2. :link
  3. :active
  4. visited
css3选择器
- 结构选择器
  1. ul:nth-child(1) :第一个子元素,等价于first-child
  2. ul:nth-child(2n) :从0开始设置,获取所有的偶数子元素
  3. ul:nth-child(2n+1) :奇数子元素
  4. ul:nth-child(even) :等价于2n
  5. ul:nth-child(odd) :等价于2n+1
  6. ul:last-child()
  7. ul:first-child()
  8. ul:nth-of-type(n) :通过类型筛选出子元素
    - 现将所有的子元素按照标记名分类,然后从同种类型中找出第n个子元素
  9. ul:first-of-type –>ul:nth-of-type(1)
  10. ul:last-of-type
  11. :only-child 只有一个子元素
  12. :only-of-type 同种类型中的子元素只有一个
  13. :empty 没有子元素(包含文本,换行,空格)
- 否定选择器
  1. :not(nth-child(n)) 除了第n个子元素
  2. :not(nth-of-type(n))
- 属性选择器:通过属性值筛选出某些元素
  - E[attr=val] –>input[type=”submit”]
  - E[attr|=val] 必须以val的字符开头或者 val-开头
  - E[attr*=val] 属性值中只要包含包含val字符串
  - E[attr~=val] attr的属性有多个,其中有一二个属性值为val
  - E[attr$=val] 以val结尾
  - E[attr^=val] 以val开头
- 目标伪类选择器
  - :target
- 伪元素
  - :first-line 匹配第一行文本
  - :first-letter 匹配第一行文本的首字符
  - :
CSS属性
1. border-radius
2. liner-gradient
  - 渐变是作用在background属性上
  - 渐变方向是沿着一条直线轴的方向
  - 参数:
    1. 第一个参数是设置方向:top/left/buttom/right/deg
    2. 从第二个参数开始设置颜色和位置
  - repeating-liner-gradient();
  - radial-gradient(circle,red,green);
    1. circle 圆
    2. ellipse 椭圆
    3. at top|10px 10px 来设定圆心的位置
    4. 自己可以设置水平半径和垂直半径
    5. closest-corner at 50px 50px
3. background
  - origin :padding-box/content-box/border-box
  - clip :text(文字区以外的部分剪裁.只支持webkit内核)
  - size : 百分比/px/contain/cover
  - attachment :默认值为scroll/fixed为固定
4. 滤镜
5. 盒子阴影(box-shadow):h v blur spread color insert
6. text-shadow:h v blur color
7. text-stroke 镂空字体
8. mask 遮罩层(webkit有效)
  - repeat/no-repeat
  - position
    rem布局(font size of root element)

默认:1rem = 16px;
谷歌浏览器默认的字体大小是12px

选择器

rem布局(font size of root element)