image.png
image.png

结构性伪类

  1. :first-child{}   // 选择当前元素所在子集里面第一个
  2. :last-child{}    // 选择当前元素所在子集里最后一个
  3. :nth-child(6){}  // 选择当前元素所在子集里面第几个
  4. :nth-last-child(6){}  // 选择当前元素所在子集里倒数第几个
  5. :only-child{}    // 选择当前元素所在子集里面仅有一个情况下被选择
  1. :first-of-type{}    // 选择当前元素所在子集里面第一个
  2. :last-of-type{}     // 选择当前元素所在子集里的最后一个
  3. :nth-of-type(6){}   // 选择当前元素所在子集里面第几个
  4. :nth-last-child(6){} //选择当前元素所在子集里面倒数第几个
  5. :only-of-type{}     // 选择当前元素所在子集里面仅有一个情况下被选择

image.pngimage.png

动态伪类选择器

  1. a:link      // 未被访问过
  2. a:visited   // 已被访问过
  3. a:active    // 元素被激活
  4. a:hover     // 鼠标停留在元素上
  5. a:focus     // 元素获得焦点
  1. div::first-line{color: red}  // 文字段落 第一行文字为红色
  2. div::first-letter{color: red}  // 用于文本首字母特殊样式
  3. div::before{content: "我在内容的前面"}  // 会在内容前面加上这句话
  4. div::after{content: "我在内容的后面"}  // 会在内容后面加上这句话
  6. header::after{display: block; content:"";}  // 一般用于清除浮动  必须写有 content
  7. div::selection{background: red; color:#ff0;} // 浏览页面复制文字 以后出现效果

多列布局

image.png

  1. column-width定义每列列宽度
  3. column-count定义分分列列数
  5. column-gap定义列间距
  7. column-rule定义列边框
  9. column-span定义多列布局中子元素跨列效果，firefox不支持
  11. column-fill控制每列的列高效果，主流浏览器不支持
  13. 由于column属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。
  15. //完整形式
  17. -webkit-columns:150px 4;
  19. -moz-columns:150px 4;
  21. columns:border-box;

image.png

image.png

//渐变

image.png

//2D
image.png