css常見的選擇器
選擇器的作用是選中標籤，所以下面的選擇器都是指標籤
* /*通配符選擇器*/
# /*id選擇器*/
. /*類選擇器*/
, /*分組選擇器*/
空格 /*後代選擇器*/
> /*直接後代選擇器*/
+ /*相鄰兄弟選擇器*/
~ /*通用兄弟選擇器*/
屬性選擇器
/*
屬性存在選擇器
*/
[attr] /*選擇包含attr屬性的所有元素，不論attr的值*/
/*需要注意的是屬性值val是字符串需要用引號引起來*/
[attr=val] /*選擇僅包含attr被賦值爲val的所有元素*/
[attr~=val]/*選擇以val命名的屬性元素，並且屬性是以空格作爲分隔值*/
/*
子串值屬性選擇器
*/
[attr|=val]/*選擇attr屬性的值以val（包含val）或者val-開頭的元素*/
[attr^=val]/*選擇attr屬性的值以val開頭（包含val）的元素*/
[attr$=val]/*選擇attr的值以val結尾（包含val）的元素*/
[attr*=val]/*選擇attr屬性值中含有字符串val的元素*/
<style>
div[name]{
border:1px solid
}
</style>
<div>
<div name="a">1</div>
<div name="b">2</div>
</div>
僞類選擇器
/**
鏈接僞類 只能作用到鏈接類的標籤元素
*/
:link /*表示作爲超鏈接，指向一個未訪問的地址的所有錨*/
:visited/*表示作爲超鏈接，指向一個已被訪問的地址的所有錨*/
:target/*代表一個特殊的元素，它的id是URI的片段標識符*/
/**
動態僞類 能作用到所有標籤元素
*/
:hover/*選中鼠標懸浮的標籤元素*/
:active/*選中點擊按住的標籤元素*/
:visited
/*會被瀏覽器記住已經點擊過
visited只有3個屬性可以修改
color background-color border-color
*/
表單僞類選擇器
:enabled/*匹配可編輯的表單*/
:disable/*匹配被禁用的表單*/
:checked/*匹配被選中的表單*/
:focus/*匹配獲焦的表單*/
結構性僞類選擇器
/* 關於後面index的值說明：
index的值從1開始計數！！！！
index可以爲變量n(只能是n)
index可以爲even odd
*/
/*選擇id=wrap元素標籤的子標籤中索引是index的表情*/
#wrap ele:nth-child(index) /*表示匹配#wrap中第index的子元素 這個子元素必須是ele*/
#wrap ele:nth-of-type(index) /*表示匹配#wrap中第index的ele子元素*/
/* 注意
:nth-child和:nth-of-type 有一個很重要的區別！
nth-of-type以元素爲中心！就是所有符合條件的第一個標籤，標籤不同也會被選中
舉例：
<div id="wrap">
<div class="inner">div</div>
<p class="inner">p</p>
<span class="inner">span</span>
<h1 class="inner">h1</h1>
<h2 class="inner">h2</h2>
</div>
下面的css會選中上面所有的標籤，因爲每個標籤都只出現一次
#wrap .inner:nth-child(1){
border: 1px solid;
}
*/
:first-of-type /*元素爲中心，第一個出現元素*/
:last-of-type /*元素爲中心，最後一個出現的元素*/
:nth-last-type(index)
:only-of-type /*選中僅出現一次的元素*/
/* 例如：
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<p>4</p>
<p>5</p>
<span>6</span>
</div>
通過
div p:nth-last-type(1){
color:red
}
可以選擇4所在的標籤並且將4的字體設置爲紅色，相對於nth-child比較寬鬆的選擇元素，
可以有上面類似的span不需要的元素，而nth-child必須是第一個元素,可能選擇不到
div p:nth-child(1){
color:red
}
則一個也選擇不到元素，因爲div下面第一個子元素不是p標籤
*/
/*:nth-child(index)系列 */
:first-child /*第一個元素*/
:last-child /*最後一個元素*/
:nth-last-child(index)/*最後一個元素*/
:only-child /*(相當於:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))*/
:not() /*不要選中*/
:empty() /*內容必須是空的，有空格都不行，有屬性沒關係*/
僞元素選擇器
僞元素建議使用雙冒號，單冒號也可以使用
::after /*css生成的虛擬的dom元素（相當於生成的標籤）一個元素只能有一個after或before*/
::before
::firstLetter/*選中標籤內的第一個字符*/
::firstLine/*選中第一行元素*/
::selection /*鼠標按住左鍵選中的內容*/