section > div{ /* 子元素选择器 */
    color:#ffffff;
}
.brother + div{ /* 相邻兄弟元素选择器 */
    color:#ff0000;
}
.brother ~ div{ /* 通用兄弟元素选择器 */
    color:#00ff00;
}
div, p, section, .brother, #id{ /* 群组选择器 */
    color:#0000ff;
}

a[href]{
    color:#000000;
}
a[href="http://www.baidu.com"]{ /* 元素属性值 */
    color:#666666;
}

input[value~="password"]{ /* 元素包含指定属性值 */
    color:#333333;
}
input[value^="pass"]{ /* 元素开头属性值 */
    color:#223333;
}
input[value$="rd"]{ /* 元素结尾属性值 */
    color:#222233;
}
input[value*="word"]{ /* 元素属性值包含 */
    color:#222222;
}
input[name|="use"]{ /* 元素属性值-开头 */
	color:#454545;
}

a:link{
    color:red;
}
a:visited{
    color:green;
}
a:hover{
    color:blue;
}
a:action{
    color:white;
}
input:focus{
    border:green 2px solid;
}

input:enabled{ /* 设置可编辑状态样式 */
    background-color:#ffff00;
}
input:disabled{ /* 设置不可编辑状态样式 */
    background-color:#dddddd; 
}
input:checked{
    background-color:#ff0000; /* 设置多选框选中颜色，只兼容Opera浏览器 */
}

div:first-child{ /* 相对父元素首个子元素 */
    background-color:#000000;
}
div:last-child{ /* 相对父元素最后一个子元素 */
    backgroud-color:#880000;
}
/* 相对于父元素的第n个子元素 */
div:nth-child(2n-1){
    background-color:#008800;
}
div:nth-child(1){
    background-color:#000088;
}
div:nth-child(odd){
	background-color:#800000;
}
/* 相对于父元素倒数第n个子元素 */
div:nth-last-child(2n-1){
    background-color:#080000;
}
/* 相对于父元素特定类型的第n个子元素 */
div:nth-of-type(2n-1){
    background-color:#008000;
}
/* 相对于父元素特定类型的倒数第n个子元素 */
div:nth-last-of-type(2n-1){
    background-color:#000800;
}
/* 相对于父元素特定类型的第一个子元素 */
div:first-of-type{
    background-color:#000080;
}
/* 相对于父元素特定类型的最后一个子元素 */
div:last-of-type{
    background-color:#000008;
}
/* 相对于父元素唯一子元素 */
div:only-child{
    background-color:#808000;
}
/* 相对于父元素唯一特定类型的子元素 */
div:only-of-type{
    background-color:#800800;
}
/* 匹配没有子元素（包括文本节点）的每一个元素 */
div:empty{
    background-color:#800080;
}

 /* 匹配非指定元素/选择器的每个元素 */ 
section:not(div){
    background-color:#008888;
}
section:not(.child){
    background-color:#888800;
}

/* 类型 */
div::first-line{ /* 对元素的第一行文本进行格式化， 只用于块级元素 */
    font-size:24px;
}
div::first-letter{ /* 对元素的第一个字符进行格式化， 只用于块级元素 */
    font-size:32px;
}

div::before{ /* 在元素的内容前面插入新内容，常用"content"配合使用 */
    content:"";
    display:block;
    width:100px;
    height:100px;
    background-color:#ff0000;
}
div::after{ /* 在元素的内容后面插入新内容，常用"content"配合使用。多用于清除浮动 */
    content:"";
    clear:both;
    width:100px;
    height:100px;
    background-color:#00ff00;
}
::selection{ /* 用于设置在浏览器中选中文本后的背景色与前景色 */
    color:#ff0000;
    background-color:#00ff00;
}