CSS3新增的僞類選擇器

時間 2019-11-20

標籤 css3 css 新增選擇器欄目 CSS 简体版

原文原文鏈接

　　僞類選擇器的做用：對已有選擇器作進一步的限制，對已有選擇器能匹配的元素作進一步的過濾。CSS 3提供的僞類選擇器主要分爲如下三類：css

結構性僞類選擇器
UI元素狀態僞類選擇器
其餘僞類選擇器

一、結構性僞類選擇器html

Selector:root：匹配文檔的根元素。在HTML文檔中，根元素永遠是<html.../>元素。
Selector:first-child：匹配符合Selector選擇器，且必須是其父元素的第一個子節點的元素。
Selector:last-child：匹配符合Selector選擇器，且必須是其父元素的最後一個子節點的元素。
Selector:nth-child(n)：匹配符合Selector選擇器，且必須是其父元素的第n個子節點的元素。
Selector:nth-last-child(n)：匹配符合Selector選擇器，且必須是其父元素的倒數第n個子節點的元素。
Selector:only-child：匹配符合Selector選擇器，且必須是其父元素的惟一子節點的元素。
Selector:first-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第一個元素。
Selector:last-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的最後一個元素。
Selector:nth-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的第n個元素。
Selector:nth-last-of-type(n)：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的倒數第n個元素
Selector:only-of-type：匹配符合Selector選擇器，且是與它同類型、同級的兄弟元素中的惟一一個元素。
Selector:empty：匹配符合Selector選擇器，且其內部沒有任何子元素（包括文本節點）的元素。
Selector:lang(lang)：匹配符合Selector選擇器，且內容是特定語言的元素。

對於：nth-child和:nth-last-child兩個僞類選擇器，還支持以下用法。java

　　Selector:nth-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素android

　　Selector:nth-last-child(odd/event)：匹配符合Selector選擇器，且必須是其父元素的第奇數個/偶數個子節點的元素ajax

　　Selector:nth-child(xn+y)：匹配符合Selector選擇器，且必須是其父元素的第xn+y個子節點的元素框架

　　Selector:nth-last-child(xn+y)：匹配符合Selector選擇器，且必須是其父元素的第xn+y個子節點的元素字體

使用:nth-last-child僞類選擇器的示例以下：ui

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> child </title>
    <style type="text/css">
        /* 定義對做爲其父元素的倒數第3n+1個（一、四、7）子節點
            的li元素起做用的CSS樣式 */
        li:nth-last-child(3n+1) {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">Java</li>
    <li id="javaee">輕量級Java EE</li>
    <li id="ajax">Ajax</li>
    <li id="xml">XML</li>
    <li id="ejb">經典Java EE</li>
    <li id="android">Android</li>
</ul>
</body>

其效果以下：spa

二、UI元素狀態僞類選擇器3d

　　UI元素狀態僞類選擇器包含有：Selector:link、Selector:visited、Selector:active、Selector:hover、Selector:focus、Selector:enabled、Selector:disabled、Selector:checked、Selector:default、Selector:indeterminate、Selector:read-only、Selector:read-write、Selector:required、Selector:optional、Selector:valid、Selector:invalid、Selector:in-range、Selector:out-of-range、Selector::selection(該選擇器前面有兩個冒號)。

三、其餘僞類選擇器

　　3.1：target僞類選擇器（匹配符合Selector選擇器且必須是命名錨點目標的元素）

　　　　要求元素必須是命名錨點的目標，且必須是當前正在訪問的目標。它的做用是頁面可經過該選擇器高亮顯示正在被訪問的目標。下面示範了:target選擇器的用法（該代碼爲《瘋狂HTML 5+CSS 3+JavaScript講義》中的示例代碼）

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> :target </title>
    <style type="text/css">
        :target{
            background-color: #ff0;
        }
    </style>
</head>
<body>
<p id="menu">
<a href="#java">瘋狂Java講義</a> | 
<a href="#ee">輕量級Java EE企業應用實戰</a> | 
<a href="#android">瘋狂Android講義</a> | 
<a href="#ejb">經典Java EE企業應用實戰</a>
</p>
<div id="java">
<h2>瘋狂Java講義</h2>
<p>本書詳細介紹了Java語言各方面的內容。</p>
</div>
<div id="ee">
<h2>輕量級Java EE企業應用實戰</h2>
<p>本書詳細介紹Struts 二、Spring 三、Hibernate三個框架整合開發的知識</p>
</div>
<div id="android">
<h2>瘋狂Android講義</h2>
<p>本書詳細介紹了Android應用開發的知識。</p>
</div>
<div id="ejb">
<h2>經典Java EE企業應用實戰</h2>
<p>本書詳細介紹JSF 、EJB 三、JPA等Java EE相關的知識</p>
</div>
</body>

下面顯示的是點擊了「瘋狂Java講義」連接後顯示的效果

　　3.2：not僞類選擇器（匹配符合Selector1選擇器但不符合Selector2選擇器的元素，至關於用Selector1減去Selector2）

　　　　下面頁面代碼示範了:not選擇器的用法：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> :not </title>
    <style type="text/css">
        li:not(#ajax) {
            color: #999;
            font-weight: bold;
        }
    </style>
</head>
<body>
<ul>
    <li id="java">瘋狂Java講義</li>
    <li id="javaee">輕量級Java EE企業應用實戰</li>
    <li id="ajax">瘋狂Ajax講義</li>
    <li id="xml">瘋狂XML講義</li>
    <li id="android">瘋狂Android講義</li>
</ul>
</body>

從運行結果能夠看到，除了id爲ajax的全部<li.../>元素字體設置爲#999表示的顏色，且字體加粗顯示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。