全棧工程師開發手冊 （作者：欒鵬）

css選擇器全解：

css選擇器包括：基本選擇器、屬性選擇器、偽類選擇器、偽元素選擇器

選擇器總是從左至右解析，不要私自新增()優先運算

基本選擇器

h2{                                 /*  標籤選擇 */
}
p,h1{                               /* 使用逗號實現元素合集  */
}
div h1,div h2{                      /* 使用空格實現後代元素(子元素和子孫元素)查詢，表示div的後代元素h1，h1和div的合集，在從合集中查詢後代元素h2，最後查詢到的為h2列表 */
 

    background-color: #2b542c;
}
p>h1{                                /*  >表示直接子元素  */
}
p+h1{                                /*  +表示緊接在後面的同胞元素，選擇h1元素  */
}
html>body table+ul{                 /*  在html元素中查詢直接子元素body，在body中查詢後代元素table，在table元素後面查詢同胞元素ul，即在最後選擇的為ul列表  */
}
body *{                              /*  *萬用字元選擇器，匹配所有元素，表示匹配body的所有後代元素  */
 

}
p.class1.class2{                    /*  .表示class類選擇器，p為標籤，連在一塊寫，表示多重篩選，一個元素可以有多個樣式  */
}
#id1{                                /*  #id選擇器，一個元素只能有一個id，所有元素的id不能相同   */
}

屬性選擇器

p[attribute1][attribute2]{         /*  [] 屬性選擇器，表示具有某種屬性的所有元素，多個引數表示同時具有多個屬性，class也可以作為一個屬性篩選 */
}
a[href="http://www.123.com"]
 
{      /*  =具有某個屬性，且屬性值等於指定值的所有元素 */
}
div[class~="class1"]{               /*  ~=具有某個屬性，且屬性值包含指定值的所有元素  */
}
input[title^="title1"]{             /*  ^=指定屬性的值以指定字串開頭   */
}
input[title$="title1"]{             /*  $=指定屬性的值以指定字串結尾   */
}
input[title*="title1"]{             /*  *=指定屬性的值包含指定字串   */
}
input[title|="title1"]{             /*  |=指定屬性的值等於title1或者以title1-開頭   */
}

偽類選擇器

a:link{                             /*  link表示未訪問過的超連結  */
}
a:visited{                          /*  visited表示已訪問過的超連結 */
}
input:focus{                        /*  focus表示當前擁有焦點的元素 */
}
div:hover{                          /*  hover表示滑鼠指標停留的元素  */
}
a:active{                           /*  active表示被使用者輸入啟用的元素  */
}
div:first-child{                    /*  first-child表示第一個元素，此句表示第一個div元素  */
}
div :first-child{                   /*   空格表示後代元素，此句表示div元素的第一個後代元素  */
}

偽元素選擇器

p:first-letter{                     /* first-letter行內元素首字母  */
}
p:first-line{                       /*  first-line行內元素首行  */
}
p:before{                           /*  before元素前插入內容  */
    content:"AAAAAAAAAAA";
    color: #2b542c;
}
p:after{                            /*   after在元素後插入內容  */
    content: "AAAAAAAAAAAA";
    color: #2b542c;
}