css选择器

• 基础选择器

  • ID选择器
  • 类选择器
  • 属性选择器
  • 元素选择器
  • 组合选择器
  • 多元素选择器 ，格式：E,F
  • 后代选择器，格式：E F
  • 子元素选择器，格式：E>F；匹配B元素，满足条件：B是A的直接子节点。
  • 直接相邻选择器，格式：E+F；匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）。
  • 通用兄弟选择器，格式：A ~ B；匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）。
  • id和class选择器,以'.'和'#'为分隔符，格式: .class1.class2#id1
  • element.class1或element#id。

• 属性选择器

  • E[attr]
  • E[attr = value]
  • E[attr~=value]
  • E[attr^=value]
  • E[attr$=value]
  • E[attr*=value]

• 伪类选择器（常用的）

  • E:link --所有未被点击的链接。
  • E:visited --所有被点击的链接。
  • E:active --鼠标已经按下时，还没释放。
  • E:hover --鼠标悬停其上的E元素。
  • E:focus --获得当前焦点的E元素。
  • E:lang(c) --匹配狼属性等于c的元素。（不常用）
  • E:enabled --表单中可以用的元素。
  • E:disabled --被禁用的元素。
  • E:checked 表单中被选中的radio或checkbox元素。
  • 伪元素选择器（HTML标签元素中没有，凭空创建一个元素。）
  • E::before --此元素之前。
  • E::after --此元素之后。
  • E::selection 用户当前选中的元素。（只对选中文本元素生效。）
  • E::first-letter --选取某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容。
  • E::first-line --选取某 block-level element（块级元素）第一行。

• 选择器的优先级或权重值（1表示最高，9最低，由高到低。）

  • 1.属性后面使用！important会覆盖所有样式。
  • 2.作为style属性写在元素标签上。
  • 3.id选择器。
  • 4.类选择器。
  • 5.伪类选择器。
  • 6.属性选择器。
  • 7.标签选择器。
  • 8.通配符选择器。
  • 9.浏览器自定义。
  • 10.复杂场景，含有多个选择器，要计算器权重值。
    • 行内内样式 ==>a
    • id选择器 ==>b
    • 类、属性和伪类 ==>c
    • 标签选择器、伪元素 ==>d
  • 11.当权重值一样时，下面会覆盖上面的值。

• 块级元素和行内元素

  • 块级元素：可以包含块级、行内元素；块级元素占据一整行。
    • 常见的块级元素：div、 h1~h6、 p、 hr 、form、 ul 、ol 、 pre、 table、 li 、dd、tr、 td、th
  • 行内元素： 只可以包含行内元素；只占据自身的宽度 空间。
    • 常见的行内元素：span 、em 、strong、 a、 br 、img、 button 、 input 、 label 、 select、 textarea、 code 、script
  • 块级元素与行内元素宽高设置、内外边距的差距。
    • 宽度：width，对块级元素有效；不会继承给子元素。
    • 高度：height，只对块级元素有效；不会继承给子元素。
    • 边框 ：border，对块级元素有效。（注：可以用边框实线三角形、斜线、圆形....）
      • border-style：设置线条，常用的solid：实线；
      • border-color:设置颜色。
      • border-width:设置线的宽度。
      • 继承性：不会继承给子元素。
    • 内边距：padding
      • 上边距：padding-top，只对块级元素有效。
      • 右边距：padding-right，对块级元素和行内元素有效。
      • 下边距：padding-bottom，只对块级元素有效。
      • 左边距：padding-left，对块级元素和行内元素有效。
      • 继承性：不会继承给子元素。
    • 外边距：margin
      • 上边距：margin-top，只对块级元素有效。
      • 右边距：margin-right，对块级元素和行内元素有效。
      • 下边距：margin-bottom，只对块级元素有效。
      • 左边距：margin-left，对块级元素和行内元素有效。
      • 继承性：不会继承给子元素。
    • 注意点：
      1.清除浏览器自带的内外边距样式：
      *{padding:0px;
      margin:0px}
    • display属性
      • 块级属性：block、table、list-item
      • 行内属性：inline、inline-table、inline-block
      • 块级元素和行内元素可以相互转换。
      • 继承性：不会继承给子元素。

字体

• 字体大小：font-size。
• font-family：字体，可以是宋体、微软雅黑等等。
• 字体渲染原理：浏览器在加载HTML时，会把文本内容渲染成unicode，然后再去寻找css中设置的字体，找到之后渲染，如果没找到，用默认字体渲染。
• 字体设置的格式：中文名字 | 英文名 | 16进制编码。eg：宋体 | SimSun | %u5B8B%u4F53
• 可以在浏览器的console中用命令:escape('中文字体名'),得到字体的16进制编码。
• font-weight：字体粗细程度，常用的默认值为regular和粗体bold。
• line-height：元素所占一行的空间高度。
• 继承性：会被子元素继承。

文本

• text-align：文本对其方式，有left、center、right、justify。
  • justify：使文本 两端对齐。
• text-indent：文案第一行缩进距离。
• text-decoration:none、underline、line-through、overline
• text-transform:改变文字大小写，none、uppercase、lowercase、capitallize(首字母大写)。
• word-spaceing:可以改变字或单词之间的标准间隔。
• letter-spaceing:修改字母或字符的间隔。
• 继承性：可以被子元素继承。
• 附加知识：
  • 单行文本溢出加_
    使用以下三个属性：
    white-space:处理换行。
    over-flow:处理超出的文本是否显示与隐藏。
    text-overflow:超出的文本以什么形状显示。
    eg：*{
    white-space:nowrap;
    over-flow:hidden;
    text-overflow:ellipse;
    }

颜色

• 单词：red、blue、pink、yellow、white、black
• 十六进制：#000000（白色），#fff
• rgb:rgb(255,255,255)
• rgba:rgba(0,0,0,0.5)

单位

• px：固定单位。
• 百分比：相对单位。
• em：相对单位，相对于父元素（直接父元素）的字体大小。
• rem：相对单位，相对于根元素（html）字体大小。
• vw vh：相对单位，1vw表示为屏幕的宽度1%。

隐藏或透明

• opacity：0；透明度为0
• visibility:hidden;元素还在，占着空间。
• display：none；消失，不占用位置。
• background-color：rgba(0,0,0,0.2)背景色透明。