偽類 · JavaWeb教案2019

## 偽類 CSS偽類是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。例如，`:hover` 將在用戶懸停在選擇器指定的元素上時應用樣式。 ### anchor偽類鏈接的不同狀態都可以以不同的方式顯示。 ```html <style> a:link {color:#000000;} /* 未訪問鏈接*/ a:visited {color:#00FF00;} /* 已訪問鏈接 */ a:hover {color:#FF00FF;} /* 鼠標移動到鏈接上 */ a:active {color:#0000FF;} /* 鼠標點擊時 */ </style> <body> <p><b><a href="/css/" target="_blank">這是一個鏈接</a></b></p> <p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴格按順序才能看到效果。</p> <p><b>注意：</b> a:active 必須在 a:hover 之后。</p> </body> ``` > 注意：在CSS定義中，a:hover必須被置于a:link和a:visited之后，a:active必須被置于 > a:hover之后，才是有效的。偽類的名稱不區分大小寫。 ### `:first-child`偽類 :first-child CSS 偽類代表了一組兄弟元素中的第一個元素。被匹配的元素需要具有一個父級元素。 ```css element:first-child { style properties } ``` 上面的CSS作用于下面的HTML: ```css span:first-child { background-color: lime; } ``` ```html <div> <span>This span is limed!</span> <span>This span is not. :(</span> </div> ``` ![](/assets/pic/first-child.png) ### `:first-line`偽類 "first-line" 偽元素用于向文本的首行設置特殊樣式。在下面的例子中，瀏覽器會根據 "first-line" 偽元素中的樣式對p元素的第一行文本進行格式化： ```html <style> p:first-line { color:red; } </style> <body> <p>A smooth, mild blend of coffees from Mexico, A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,</p> </body> ``` > 注意："first-line" 偽元素只能用于塊級元素。下面的屬性可應用于 "first-line" 偽元素： > font properties > > color properties > > background properties > > word-spacing > > letter-spacing > > text-decoration > > vertical-align > > text-transform > > line-height > > clear ### `:before`偽類 ":before" 偽元素可以在元素的內容前面插入新內容。下面的例子在每個<h1>元素前面插入一幅圖片： ```html <style> p:before { content:"臺詞：-"; background-color:yellow; color:red; font-weight:bold; } </style> <body> <p>The :before pseudo-element inserts content before an element.</p> <p><b>注意:</b>僅當 !DOCTYPE 已經聲明 IE8 支持這個內容屬性</p> </body> ``` > 大家應該想到了，既然有:before偽類，自然就有:after偽類，大家可以自行學習。 > > 在css中實際上提供了非常多的偽類可以使用，我們指數選擇了一些常用的進行介紹，其他偽類的學習，需要大家自主學習。