css選取器基本屬性

標籤：

選取器
一，相鄰選取器；
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：
: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;
}
四，虛擬元素選取器；
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;
}

css選取器基本屬性