CSS

CSS选择器

基本选择器

*	通用元素选择器，匹配任何元素
E	标签选择器，匹配所有使用E标签的元素
.someClass	class选择器，匹配所有class属性中包含someClass的元素
#someID	id选择器，匹配所有id属性等于someID的元素
EF	class里同时含有E和F两个类的元素

多元素选择器

E,F	多元素选择器，同时匹配所有E元素和F元素，E和F之间用逗号分隔
E F	后代元素选择器，匹配所有属于E元素的后代的F元素，E和F之间用空格分隔
E > F	子元素选择器，匹配所有E元素的子元素F
E + F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

CSS 2.1 属性选择器

E[att]	匹配所有具有att属性的E元素，不考虑它的值（注意：E在此处可以省略，比如"[att]"。以下同）
E[att=val]	匹配所有att属性等于val的E元素
E[att~=val]	匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素
E[att\|=val]	匹配所有att属性具有多个连字号分隔的值，其中一个值以val开头的E元素。主要用于lang 属性，比如"en","en-us","en-gb"等等

CSS 2.1 中的伪类

E:first-child	匹配父元素的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下，还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素

CSS 2.1 中的伪元素

E:first-line	匹配E元素的第一行
E:first-letter	匹配E元素的第一个字母
E:before	在E元素之前插入生成的内容
E:after	在E元素之后插入生成的内容

CSS3 的同级元素通用选择器

E ~ F

匹配任何在E元素之后的同级F元素

CSS3 属性选择器

E[att^="val"]	属性att的值以val开头的元素
E[att$="val"]	属性att的值以val结尾的元素
E[att*="val"]	属性att的值包含val字符串的元素

CSS3 中与用户界面有关的伪类

E:enabled	匹配表单中激活的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E:selection	匹配用户当前选中的元素

CSS3 中的结构性伪类

E:root	匹配文档中的根元素，对于HTML文档就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type 或 nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，注意：文本节点也被看作子元素

CSS3的反选伪类

E:not(s)

匹配不符合当前选择器的任何元素

CSS3中的:target伪类

E:target

匹配文档中特定id点击后的效果

color属性

为不同元素设置文本颜色

rgba(0, 0, 0, 0.87) 最后一位0.87为不透明度，介于0（完全透明）-1（完全不透明）之间

font-size属性

设置不同元素字体尺寸

1em等于当前的字体尺寸

2em等于当前字体尺寸的两倍

px像素

line-height属性

设置行间的距离（行高）

值为数值时表示：此数字会与当前的字体尺寸相乘来设置行间距

Flex布局

任何元素都可以指定为Flex布局，行内元素也可以使用Flex布局，Webkit内核浏览器必须加上-Webkit前缀

.box {
  display: flex;
  display: -webkit-flex; /* Safari */
}

.box {
  display: inline-flex;
}

采用Flex布局的元素称为“Flex容器”，它的所有子元素自动成为容器成员称为“Flex项目”

容器有以下六个属性

flex-direction:  项目排列方向

                row (默认)，主轴方向为水平，起点在左端
                row-reverse 主轴方向为水平，起点在右端
                column  主轴方向为垂直，起点在上沿
                column-reverse 主轴方向为垂直，起点在下沿

flex-wrap:  项目在轴线上排不下时如何换行

            nowrap（默认），不换行
            wrap  换行，第一行在上方
            wrap-reverse  换行，第一行在下方

flex-flow:  flex-direction和flex-wrap的简写形式，默认为row nowrap

            <flex-direction> || <flex-wrap>

justify-content:  项目在主轴上的对齐方式

                  flex-start （默认），左对齐
                  flex-end  右对齐
                  center  居中
                  space-between 两端对齐，项目之间的间隔相等
                  space-around  每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items:   项目在交叉轴如何对齐

              flex-start  交叉轴的起点对齐
              flex-end  交叉轴的终点对齐
              center  交叉轴的终点对齐
              baseline  项目的第一行文字的基线对齐
              stretch （默认），如果项目未设置高度或设为auto，将占满整个容器的高度

align-content:  多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

                flex-start  与交叉轴的起点对齐
                flex-end  与交叉轴的终点对齐
                center  与交叉轴的中点对齐
                space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
                space-around  每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
                stretch （默认），轴线占满整个交叉轴

项目有以下6个属性

order:  项目排列顺序。数值越小，排列越靠前，默认为0，可以为负值

        <number>

flex-grow:  项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

            <number>

flex-shrink:  项目的缩小比例，默认为1，即如果空间不足，该项目将缩小,负值无效

              <number>

flex-basis:   定义在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目本来的大小

            <length> | auto

flex:       flex-grow,flex-shrink,flex-basis的简写，默认值为 0 1 auto，后两个属性可选

align-self: 允许单个项目与其它项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，
            表示继承父元素的align-items属性，如果没有父元素则等同于stretch.

            auto | flex-start | flex-end | center | baseline | stretch