/**
 * 元素選擇器
 * */
h1{
    color: gray;
    /*font-family的值使用","分隔,  其他聲明的屬性的值有多個關(guān)鍵字須用空格分隔*/
    font-family: "微軟雅黑", serif;
    font: medium helvetica;
}
h2{
    color: silver;
}
p{
    font-family: "微軟雅黑", serif;
}

/**
 * 選擇器分組
 * */
h1, h2{
    background-color: lightcyan;
}
/*通配符*/
*{
    margin: 0;
    padding: 0;
}

/*
 * 類選擇器   區(qū)分大小寫
 */
.p-default{
    color: #78D700;
    margin: 10px;
    font-style: italic;
}
.platform-bug.p-default{
    border: 1px solid gray;
    font-size: x-large;
}
.p-default.platform-code{
    font-style: normal;
}

/*
 * ID選擇器  區(qū)分大小寫
 */
#title{
    font-size: 36px;
}

/*
 * 屬性選擇器  支持IE7+
 */
h1[class]{
    margin: 5px;
    color: white;
    background-color: brown;
}
a[href][title]{
    display: block;
    text-decoration: none;
    font-size: 20px;
}
a[title="google.hk"]{
    color: #78D700;
}
/*屬性值包含*/
p[class~="p-default"]{
    border: 1px dotted blue;
}
/*以p-開頭*/
p[class^="p-"]{
    border: 1px solid blue;
}
/*以bug結(jié)尾*/
p[class$="-bug"]{
    color: red;
}
/*包含-*/
p[class*="-"]{
    color: lightpink;
}
/*等于p或者以p-開頭*/
p[class|='p']{
    background-color: #808080;
}

/*
 * 文檔結(jié)構(gòu)選擇
 */

/*子代選擇器*/
div > h1{
    color: #FFF;
    background-color: blue;
}
/*后代選擇器*/
div span{
    font-size: 24px;
}

/*相鄰兄弟元素 : p，h1有共同的父容器，p緊跟h1之后*/
/*h1 p 的文本內(nèi)容不會影響相鄰兄弟結(jié)合符起作用，因為文本內(nèi)容屬于父元素的一部分*/
div h1 + p{
    color: greenyellow;
}

/*
 * 偽類選擇器
 */
.wrap > a{
    margin: 10px;
    background-color: #78D787;
    color: #FFF;
    text-decoration: none;
}
.wrap > a:link{
    color: black;
}
.wrap > a:visited{
    color: gray;
}
.wrap > a:hover{
    color: #FFF;
}
.wrap > a:active{
    color: gold;
}
.wrap > a:visited:hover{
    color: darkslategrey;
}

.wrap > input:focus{
    background-color: silver;
}

ul > li:first-child{
    background-color: gray;
}
/*ie9+*/
ul > li:last-child{
    background-color: green;
}
/*ie9+*/
ul > li:nth-child(2n){
    background-color: red;
}

/*根據(jù)語言選擇*/
*:lang(de){
    font-style: italic;
}

/*
 * 偽元素選擇器
 */
p:first-letter{
    font-size: 30px;
    color: red;
}
p:first-line{
    color: purple;
}
a:first-letter{
    font-size: 30px;
    color: red;
}

ul > li:before{
    content: "《";
}
ul > li:after{
    content: "》";
}