DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 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"的所有鏈接。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved