1.后代选择器：空格分隔
|
1 2 3 4 5 |
// 选取所有div中的p元素 div p { background-color: red; } |
2.子元素选择器：大于号分隔
|
1 2 3 4 5 6 |
// 选取div元素中所有直接子元素p，注意，是直接子元素，如果被别的元素包含了就不会被选中 // 下面的>代表大于号 div>p { background-color:yellow; } |
3.相邻兄弟选择器：加号分隔
|
1 2 3 4 5 |
// 选取紧接在div元素后的那一个p元素，并且div和p有相同的父元素 div+p { background-color:yellow; } |
4.后续兄弟选择器：破折号分隔
|
1 2 3 4 5 |
// 选取div后面的所有p元素，不过div与p要有相同的父元素 div~p { background-color:yellow; } |
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的
|
1 2 3 4 5 |
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ |
: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属性的四个值：
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 的简写