僞類選擇器 css3

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

2，通用兄弟選擇器匹配某元素後面的全部兄弟元素
1），定義：通用兄弟選擇器匹配某元素後面的全部兄弟元素（包括本身）
2），用法：兩種元素必須擁有相同的父元素，可是 element2 沒必要直接緊隨 element1
3），符號；使用符號（~）做爲結合符，即 element1~element2
4），使用前提：擁有共同的父元素；
二，屬性選擇器；
1），定義：屬性選擇器可以將元素附帶的屬性用於選擇器中，從而對帶有指定屬性的元素設置樣式
2），寫法：demo
[title]
{
color:red;
}
選擇帶有 title 屬性(鼠標停留顯示的內容)的全部元素
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：
3，元素狀態僞類：
1，enabled，匹配每一個已啓用的元素（大多用在表單元素上）
disabled，匹配每一個被禁用的元素（大多用在表單元素上）
checked，匹配每一個已被選中的 input 元素（只用於單選按鈕和複選框）
3，結構僞類：
first-child ，匹配屬於其父元素的首個子元素
:last-child，匹配屬於其父元素的最後一個子元素
:empty ，匹配沒有子元素（包括文本節點）的每一個元素
:only-child ，匹配屬於其父元素的惟一子元素
示例
p:first-child 選擇屬於父元素的第一個子元素的每一個 <p> 元素
p:last-child 選擇屬於父元素的最後一個子元素的每一個 <p> 元素
p:empty 選擇沒有子元素的每一個 <p> 元素
p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素
4，否認僞類
1），定義：not(selector) ，匹配非指定元素/選擇器的每一個元素
四，僞元素選擇器；
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;
}