/*屬性選擇器：屬性是相對於標籤而言。所謂屬性選擇器就是根據指定名稱的屬性的值來查詢元素*/
/*1.E[attr]:查詢指定的擁有attr屬性的E標籤。如查詢擁有style屬性的li標籤*/
li[style]{
    text-decoration: underline;
}

/*2.E[attr=value]:查詢擁有指定的Attr屬性並且屬性值為value的E標籤。如想查詢擁有class屬性並且值為Red的li標籤   =是嚴格匹配*/
li[class=red]{
    /*font-size: 30px;*/
}
/*3.E[attr*=value]:查詢擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的E標籤*/
li[class*=red]{
    /*font-size: 30px;*/
}
/*4.E[attr^=value]:查詢擁有指定的attr屬性並且屬性值以value開頭的E標籤*/
li[class^=blue]{
    font-size: 30px;
}
/*5.E[attr$=value]:查詢擁有指定的attr屬性並且屬性值以value開結束的E標籤*/
li[class$=blue]{
    /*font-size: 30px;*/
}

/*兄弟偽類：
+：獲取當前元素的相鄰的滿足條件的元素
~：獲取當前元素的滿足條件的兄弟元素*/

/*下面這句樣式說明查詢 ：添加了.first樣式的標籤的相鄰的li元素
1.相鄰
2.必須是指定型別的元素*/
.first + li{
    color: blue;
}

/*下面樣式查詢添加了.first樣式的元素的所有兄弟li元素
1.必須是指定型別的元素*/
.first ~ li{
    color: pink;
}

/*相對於父元素的結構偽類*/
/*E:first-child:查詢E元素的父級元素中的第一個E元素。在查詢的時候並不會限制查詢的元素的型別*/
/*下面這句樣式查詢：li的父元素中的第一個li元素
1.相對於當前指定元素的父元素
2.查詢的型別必須是指定的型別*/
li:first-child{
    color: red;
}
/*E:last-child:查詢E元素的父元素中最後一個指定型別的子元素*/
li:last-child{
    background-color: skyblue;
}
/*查詢的時候限制類型  first-of-type*/
/*1.也是相對於父元素
2.在查詢的時候只會查詢滿足型別條件的元素，過渡掉其它型別的元素*/
li:first-of-type{
    color: red;
}
li:last-of-type{
    color: orange;
}

/*指定索引位置 nth-child(從1開始的索引||關鍵字||表示式)*/
li:nth-child(5){
    background-color: lightblue;
}
/*偶數個元素新增背景  even:偶數  odd:奇數*/
/*li:nth-child(even){
    
}
li:nth-child(odd){
    
}*/
li:nth-of-type(even){
    background-color: orange;
}
li:nth-of-type(odd){
    background-color: pink;
}
/*想為前面的5個元素新增樣式*/
/*n:預設取值範圍為0~子元素的長度.但是當n<=0時，選取無效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-last-of-type(-n+5){
    font-size: 30px;
}
li:nth-of-type(-n+5){
    font-size: 30px;
}
/*空值:沒有任何的內容，連空格都沒有*/
li:empty{
    background-color: red;
}




/*E:target:可以為錨點目標元素新增樣式，當目標元素被觸發為當前錨鏈接的目標時，呼叫此偽類樣式*/
h2:target{
    color: red;
}