CSS (1) 选择器 (1)

CSS3 选择器

• 元素选择器
  • id
  • class
  • -
  • 标签
• 关系选择器
  • 空格
  • -
  • ~

• 属性选择器

  • 元素[属性名称]
  • 元素[属性名称=”属性值”]
  • 元素[属性名称^=”属性值”]
  • 元素[属性名称$=”属性值”]
  • 元素[属性名称*=”属性值”]

  • 元素[属性名称

    =”属性值”] a-b a-c a…

  • 元素[属性名称~=”属性值”] class=”a b” class=”a”

• 伪对象 ::

  • 选择内容中的第一个字符 ::first-letter
  • 选择内容中的第一行 ::first-line
  • 在内容之前::before content
  • 在内容之后::after content
  • 设置内容被选择时的样式 ::selection

• 伪类 :

  • A:hover :visited :link :active
  • Child li:nth-child(2)
  • :nth-child(n) 数值 表达式 2n+1 odd even
  • :First-child
  • :last-child
  • :only-child
  • :nth-last-child(n)
  • Type li:nth-of-type(2)
  • :nth-of-type(n) :first-of-type :last-of-type :nth-last-of-type(n)
  • :only-of-type

• 表单元素 checked disabled autofocus :checked :disabled :enabled 没有禁用 :focus Html:root :empty :target 对锚点设置样式

• 浏览器实验性质属性前缀

  • -webkit- 谷歌 safari
  • -o- 欧朋
  • -ms- 微软 IE
  • -moz- 火狐
  • W3c 标准

• 标准的实验性质属性书写格式

  • -webkit-Background-clip
  • -o-Background-clip
  • -ms-Background-clip
  • -moz-Background-clip
  • Background-clip

• CSS3 颜色值 透明

  • Rgba a 透明度 0-1 rgb
  • Hsl h 0-360 ls0%-100% Hsla
  • 透明值
    • Background-Color:transparent;
  • 透明度属性
    • Opacity:0-1 之间
• CSS3 背景属性
  • 调整背景原点 background-origin
  • 切背景 background-clip
  • 背景大小 background-size:宽度 高度; cover 覆盖 contain 包含在容器内
  • 多背景 测试 使用逗号分隔 使用 position 移动位置
    • Background:url() no-repeat 0 0, url() no-repeat 120 0,….
• 线性渐变 linear-gradient
• 径向渐变 radial-gradient
• 文本阴影 text-shadow
• 边框圆角 border-radius
• 盒子阴影 box-shadow
• 边框图片 border-image

• 文本溢出

  • overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

• 盒模型组成模式 box-sizing:border-box;

• 多栏 column 自适应

• 2D 变换 transform
  • 平移
  • 缩放
  • 扭曲

本文由 倪建成学习时 编辑，只是普通笔记。若是对你有用，可以自行转载

最后编辑时间为:2019-08-19 00:00:00