偽類選擇器以及否定偽類

路人甲Java 2020-02-12

展開全文

1.偽類選擇器

偽類專門表示元素的一種特殊狀態(tài)。比如：訪問過的超鏈接，普通的超鏈接，獲取焦點的文本框等等。
當我們需要為處在這些特殊狀態(tài)的元素設置樣式時，就可以使用偽類。

假設百度的鏈接已訪問過。如下為默認的樣式（訪問過和未訪問過的區(qū)別）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
</body>
</html>

結果：
未訪問過的顏色偏藍色。

:link

表示普通的鏈接（沒訪問過的鏈接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
         * 為未訪問過的鏈接設置成綠色并設置大小
         */
        a:link{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
</body>
</html>

結果：
將未訪問過的鏈接顏色設置成了綠色

疑問：當用link來為a標簽設置其他屬性時，訪問過的和未訪問過的鏈接結果就沒有了區(qū)別，為什么呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:link{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
</body>
</html>

結果：a標簽下都被設置了樣式。而沒有了訪問與未訪問的區(qū)別。

:visited

表示訪問過的鏈接
注意：瀏覽器是通過歷史紀錄來判斷一個鏈接是否被訪問過。由于涉及用戶的隱私問題，使用visted偽類只能設置字體的顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
         * 為訪問過的鏈接設置成紅色
         */
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
</body>
</html>

結果：
將訪問過的鏈接設置成紅色。

:hover

表示鼠標移入的狀態(tài)。
如下當鼠標移入時，顏色會變?yōu)榧t色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:hover{
            color: red;
        }       
        p:hover{
            background-color: greenyellow;
        }      
    </style>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
    <p>我是一個段落</p>
</body>
</html>

:active

表示的是超鏈接被點擊的狀態(tài)。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:active{
            color: black;
        }
    </style>
</head>
<body>
    <a >訪問過的鏈接</a>
    <br/><br/>
    <a href="http://www.">未訪問過的鏈接</a>
    <p>我是一個段落</p>
</body>
</html>

注意：

：hover和：active也可以為其他元素設置。
IE6中，不支持對超鏈接以外的元素設置：hover和：active。

:focus

獲取焦點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 文本框獲取焦點以后，修改背景顏色為黃色*/
        input:focus {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <!-- 使用input可以創(chuàng)建一個文本輸入框-->
    <input type="text">
</body>
</html>

結果：當光標在文本框內(nèi)時，獲取到焦點，顏色為黃色。

::selection

選中的元素
注意：這個偽類在火狐瀏覽器中需要采用另外一種方式：-moz-selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 為在p標簽中選中的內(nèi)容設置樣式*/
        /* 兼容大部分瀏覽器*/
        p::selection {
            background-color: greenyellow;
        }       
        /* 兼容大部分瀏覽器*/
        p::-moz-selection {
            background-color: greenyellow;
        }
        
    </style>
</head>
<body>
    <p>我是一個段落</p>
</body>
</html>

結果：用鼠標選中p中的'段落'內(nèi)容，選中的內(nèi)容改變了樣式。

2. 否定偽類

:not(選擇器)

作用：可以從已選中的元素中剔除出某些元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 為所有的p元素設置背景顏色為黃色，除了class值為hello */
        p:not(.hello){
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <p>我是一個段落</p>
    <p>我是一個段落</p>
    <p class="hello">我是一個段落</p>
</body>
</html>

結果：為除過class值為hello的p元素設置了背景顏色。