DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 4.4 ::selection選擇器
4.4 ::selection選擇器
編輯:CSS3基礎      日期:2016/12/22 13:50:18

一、::selection選擇器

默認情況下,浏覽器中用鼠標選擇的網頁文本都是“深藍的背景,白色的字體”顯示的。但是有些時候我們並不想要“深藍的背景,白色的字體”這種顯示效果。

浏覽器選取文本時默認樣式

在CSS3中,我們可以使用“::selection選擇器”來改變被選擇的網頁文本的顯示效果。

注意,“::selection選擇器”是雙冒號。其實雙冒號往往都是“偽元素”,而單冒號往往都是“偽類”。關於偽元素和偽類這兩者的區別,我們在CSS3進階再詳細給大家講解。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 ::selection選擇器</title>
    <style type="text/css">
        div::selection
        {
            background-color:red;
            color:white;
        }
        p::selection
        {
            background-color:orange;
            color:white;
        }
    </style>
</head>
<body>
    <div> 學習網,讓這裡的一切成為襯托你成功的 。</div>
    <p> 學習網,讓這裡的一切成為襯托你成功的 。</p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

用鼠標選擇div標簽中“ 學習網”時,會發現背景顏色變為紅色,字體顏色為白色,效果如下:

用鼠標選擇p標簽中“ 學習網”時,會發現背景顏色變為橘黃色,字體顏色為白色,效果如下:

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