查阅CSS

CSS中有四种选择符

1.后代选择器：空格分隔

2.子元素选择器：大于号分隔

3.相邻兄弟选择器：加号分隔

4.后续兄弟选择器：破折号分隔

链接CSS

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的

CSS伪类/元素

:checked —— input:checked —— 选择所有选中的表单元素

:disabled —— input:disabled —— 选择所有禁用的表单元素

:empty —— p:empty —— 选择所有没有子元素的p元素

:enabled —— input:enabled —— 选择所有启用的表单元素

:first-of-type —— p:first-of-type —— 选择每个父元素是p元素的第一个p子元素

:in-range —— input:in-range —— 选择元素指定范围内的值

:invalid —— input:invalid —— 选择所有无效的元素

:last-child —— p:last-child —— 选择所有p元素的最后一个子元素

:last-of-type —— p:last-of-type —— 选择每个p元素是其母元素的最后一个p元素

:not(selector) —— :not(p) —— 选择所有p以外的元素

:nth-child(n) —— p:nth-child(2) —— 选择所有p元素的第二个子元素

:nth-last-child(n) —— p:nth-last-child(2) —— 选择所有p元素倒数的第二个子元素

:nth-last-of-type(n) —— p:nth-last-of-type(2) —— 选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n) —— p:nth-of-type(2) —— 选择所有p元素第二个为p的子元素

:only-of-type —— p:only-of-type —— 选择所有仅有一个子元素为p的元素

:only-child —— p:only-child —— 选择所有仅有一个子元素的p元素

:optional —— input:optional —— 选择没有”required”的元素属性

:out-of-range —— input:out-of-range —— 选择指定范围以外的值的元素属性

:read-only —— input:read-only —— 选择只读属性的元素属性

:read-write —— input:read-write —— 选择没有只读属性的元素属性

:required —— input:required —— 选择有”required”属性指定的元素属性

:root —— root —— 选择文档的根元素

:target —— #news:target —— 选择当前活动#news元素(点击URL包含锚的名字)

:valid —— input:valid —— 选择所有有效值的属性

:link —— a:link —— 选择所有未访问链接

:visited —— a:visited —— 选择所有访问过的链接

:active —— a:active —— 选择正在活动链接

:hover —— a:hover —— 把鼠标放在链接上的状态

:focus —— input:focus —— 选择元素输入后具有焦点

:first-letter —— p:first-letter —— 选择每个p元素的第一个字母

:first-line —— p:first-line —— 选择每个p元素的第一行

:first-child —— p:first-child —— 选择器匹配属于任意元素的第一个子元素的p元素

:before —— p:before —— 在每个p元素之前插入内容

:after —— p:after —— 在每个p元素之后插入内容

:lang(language) —— p:lang(it) —— 为p元素的lang属性选择一个开始值

position

position属性的四个值：

static: 没有定位，元素出现在正常的流中。不会受到top, bottom, left, right影响。

relative: 定位是相对其正常位置。

fixed: 元素的位置相对于浏览器窗口是固定位置。窗口滚动它也不会移动。

absolute: 相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于html。

动画属性

@keyframes —— 规定动画。

animation —— 所有动画属性的简写属性，除了 animation-play-state 属性。

animation-name —— 规定 @keyframes 动画的名称。

animation-duration —— 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function —— 规定动画的速度曲线。默认是 “ease”。

animation-delay —— 规定动画何时开始。默认是 0。

animation-iteration-count —— 规定动画被播放的次数。默认是 1。

animation-direction —— 规定动画是否在下一周期逆向地播放。默认是 “normal”。

animation-play-state —— 规定动画是否正在运行或暂停。默认是 “running”。

多列属性

column-count —— 指定元素应该被分割的列数。

column-fill —— 指定如何填充列

column-gap —— 指定列与列之间的间隙

column-rule —— 所有 column-rule-* 属性的简写

column-rule-color —— 指定两列间边框的颜色

column-rule-style —— 指定两列间边框的样式

column-rule-width —— 指定两列间边框的厚度

column-span —— 指定元素要跨越多少列

column-width —— 指定列的宽度

columns —— 设置 column-width 和 column-count 的简写