萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css偽類偽元素域高級選擇器的介紹
css偽類偽元素域高級選擇器的介紹
給鏈接定義樣式
a:link 表示尚未訪問的鏈接，鼠標未劃過和點擊
a:visited 表示已經訪問的鏈接
a:hover 表示鼠標劃入的鏈接
a:active 表示激活的鏈接，也就是鼠標點擊鏈接的一瞬間
注意上面這四個鏈接的偽類在使用的時候要有一定的順序，即上面列舉的順序，否則看不到效果。可以簡單記為LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。
給段落定義樣式
:first-letter 為一行中的第一個字符創建樣式
:first-line 為一段中第一行創建樣式
更多偽類和偽元素
:before 可以在指定元素的前面添加內容。比如有一個段落p，你要在前面添加"Hello",可以用偽類表示為p:before {content: "Hello";}
:after 和:before一樣，只不過實在元素的後面添加內容。
但是IE6， IE7不支持content屬性。
:first-child 選取其他元素的第一個子元素，這裡容易引起混淆。比如有下面的一段代碼：
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</p>
那麼，li:frist-child將會選取所有ul標簽下的第一個li標簽，也就是上面兩個內容為第一行的li標簽，而不是選擇li標簽的第一個子元素
:focus 這個偽元素與鏈接的:hover相似，只不過:hover為鏈接專用，而這個可以用於其他的元素，表示當元素獲得焦點時應有的樣式
高級選擇器
子選擇器
">"可用來作為子選擇器。當要選取一個元素的子元素時，可以使用這個符號。比如有下面一段代碼：
<p>
<ul>
<li>第一級</li>
<li>
<ul>
<li>第二級</li>
</ul>
</li>
</ul>
</p>
p>ul 只會選擇第一個ul標簽，而不會選擇第二個ul標簽，因為它不是p標簽的子元素，而是li標簽的子元素。如果要達到選擇這兩個ul標簽，可以是p ul。這樣p標簽下面所有的ul標簽都會被選中。這種形式選取的是p標簽下面的所有子孫元素。
同胞選擇器
"+"可用來作為同胞選擇器。在HTML中，緊挨另一個標簽出現的標簽被稱為鄰近同胞標簽，如：
<body>
<h1>標題</h1>
<p>段落</p>
</body>
p標簽緊鄰h1標簽，因此p標簽為h1的同胞標簽，可以通過h1+p來選擇。
屬性選擇器
在屬性選擇器中，用[]包含要選擇的屬性，如：
img[title]
那麼，所有帶有title屬性的img標簽都會被選中，而那些沒帶title標簽的img則不會被選中。[]括號前面可以使任何有效的選擇器。
屬性選擇器中的屬性還可以帶有值。比如許多表單元素的形式都一樣，如<input type = "text" />和<input type = "checkbox" />,那麼input[type = "text"]可以讓你只選中文本框。
其他的一些屬性選擇器還有：
^= 讓你匹配屬性"以...開始"的標簽，如:a[href^= "http://"]則匹配所有以http://開頭的鏈接。
$= 讓你匹配屬性"以...結束"的標簽，如:a[href$=".com"]則匹配所有以".com"結尾的鏈接。
*= 讓你匹配屬性包含某一值的標簽，如:a[href*= "renren"]則匹配href中包含"renren"的所有鏈接。
