選擇器小結

選擇器
1、相鄰選擇器；
1.相鄰選擇器
1）.定義：相鄰選擇器匹配指定元素的相鄰兄弟元素
2）.用法：若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器
3）.表示符號：使用加號（+）做爲結合符
4）.使用前提：
a,必須有共同的父元素；
b,必須相鄰；

2.通用兄弟選擇器匹配某元素後面的全部兄弟元素
1）.定義：通用兄弟選擇器匹配某元素後面的全部兄弟元素
2）.用法：兩種元素必須擁有相同的父元素，可是 element2 沒必要直接緊隨 element1
3）.符號：使用符號（~）做爲結合符，即 element1~element2
4）.使用前提：擁有共同的父元素；
二，屬性選擇器；
1），定義：屬性選擇器可以將元素附帶的屬性用於選擇器中，從而對帶有指定屬性的元素設置樣式
2），寫法：demo
[title]
{
color:red;
}
選擇帶有 title 屬性(鼠標停留顯示的內容)的全部元素
3），常見寫法：
3、僞類選擇器；
1.目標僞類：target，
target：
1.做用：
經過錨點＃找到目標元素，經過target僞類把樣式賦給目標元素；
2.注意點：
1）.若是目標元素是a標籤，屬性只能用id和name
2）.若是目標元素是其餘標籤，屬性只能是id；
3）demo：
HTML：
<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>
<br /><br /><br />
<a name="news1">內容 1...</a>
<div id="news2">內容 2...</div>
CSS：
:target {
font-size:20pt;
border:1px solid blue;
}
div:target {
background-color:red;
}
a:target{
color: green;
}
2.元素狀態僞類：
1.enabled，匹配每一個已啓用的元素（大多用在表單元素上）
disabled，匹配每一個被禁用的元素（大多用在表單元素上）
checked，匹配每一個已被選中的 input 元素（只用於單選按鈕和複選框）
2.demo：
HTML：
ID：<input type="text" disabled="disabled" value="333" />
<br /><br />
名稱：<input type="text" /><br /><br />
狀態：<input type="radio" name="state" value="1" />啓用
<input type="radio" name="state" checked="checked" value="0" />停用<br />
CSS：
input:enabled { font-weight:bold;}
input:disabled { background-color:#ccc;color:Gray;}
input:checked {background-color:#f00;}
3.結構僞類：
first-child ，匹配屬於其父元素的首個子元素
:last-child，匹配屬於其父元素的最後一個子元素
:empty ，匹配沒有子元素（包括文本節點）的每一個元素
:only-child ，匹配屬於其父元素的惟一子元素
示例
p:first-child  選擇屬於父元素的第一個子元素的每一個 <p> 元素
p:last-child 選擇屬於父元素的最後一個子元素的每一個 <p> 元素
p:empty  選擇沒有子元素的每一個 <p> 元素
p:only-child  選擇屬於其父元素的惟一子元素的每一個 <p> 元素
demo：
HTML：
<div>
<p>段落1111</p>
<p></p>
<p>段落2222</p>
<p>段落3333</p>
</div>
CSS：
p:first-child {color:Blue;}
p:last-child {color:Red;}
p:empty {border:1px solid green;height:20px;}
div:only-child {border:1px solid black;}
4.否認僞類
1）.定義：not(selector) ，匹配非指定元素/選擇器的每一個元素
2）.demo
HTML：
<input type="text" /><br />
<input type="button" value="普通按鈕" /><br />
<input type="submit" value="提交" />
CSS：
input:not([type="text"])
{
font-size:15px;
font-weight:bold;
color:Red;
}
4、僞元素選擇器；
1.僞元素 :first-letter：
用法用處：
:first-letter 選擇器用於選取指定選擇器的首字母
經常使用於排版細節，如首字母突出顯示、下沉等
demo：
HTML：
<h1>h1 文本</h1>
<p>段落文本111</p>
<p>段落文本222</p>
CSS：
p:first-letter
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
2.僞元素 :first-line
用法用處：:first-line 選擇器用於選取指定選擇器的首行
demo：
HTML：
<p>這是一個文本比較多的段落，有多行文本。須要設置第一行文本的特定樣式。</p>
CSS：
p:first-line
{
font-size:20pt;
color:#8A2BE2;
font-weight:bold;
}
3.僞元素 ::selection
用法用處：::selection 選擇器匹配被用戶選取的部分
demo：
HTML：
頁面文本，可使用鼠標拖拽的方式直接選中，查看效果。
<p>段落文本</p>
<div>div中的文本</div>
CSS：
::selection
{
color:#f00;
}