CSS3偽類選擇器

阿新 • • 發佈：2019-01-17

1.以前用的偽類選擇器:

:hover

:link

:active

:visited

CSS3中新增的偽類選擇器:

1) E:first-child 表示E的父元素的第一個子元素 E:(Elements)元素

2)E:last-child 表示E的父元素的最後一個子元素

3):root 表示文件的根

4）E:nth-child(n) 表示E的父元素的第n個子元素

5）E:nth-lastchild(n) 表示E的父元素的倒數第n個子元素

示例程式碼如下：

1）first-child

/*li的父元素（ul）的第一個子元素*/
li:first-child 
{
    color: #9abc4d;
font-size: 18px;
font-weight: bold;
}

<ul id="CN">
    <li>羋月傳</li>
    <li>甄嬛傳</li>
    <li>甜蜜蜜</li>
</ul>
<ul id="US">
    <li>老友記</li>
    <li>生活大爆炸</li>
    <li>國務卿夫人</li>
</ul>
<ul  
id="UK">
    <li>神探夏洛克</li>
    <li>唐頓莊園</li>
</ul>

執行效果：

2)last-child: （HTML程式碼與上面保持不變，CSS3樣式如下所示：）

/*li的父元素（ul）的最後一個子元素*/
li:last-child{
    color: #bc1011;
font-size: 18px;
font-weight: bold;
}

執行結果如下：

3）第n個子元素：（當n為2的時候）

/*第2個子元素*/
li:nth-child(2){
    color: #635abc 
;
font-size: 18px;
font-weight: bold;
}

執行效果如下：

4）倒數第n個元素（n=3為例）

/*倒數第n個元素*/
li:nth-last-child(3){
    color: #ffc02f;
font-size: 18px;
font-weight: bold;
}

執行效果：

5）E:empty 不包含任何內容的元素

E:enabled 表示匹配可以用的元素

E:disabled 匹配不可用的元素

E:checked 匹配選中的元素（:checked 選擇器匹配每個已被選中的 input 元素（只用於單選按鈕和複選框）。）

注意：只有 Opera 支援 :checked 選擇器。

綜合示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他不太常用的</title>
    <style>
:enabled{
            border: #f552ff solid 3px;
}
        :disabled{
            color: #7fff54;
font-size: 16px;
}
        :checked{
            background-color: #9361ff;
/*border: #ff662e solid 3px;*/
}
    </style>
</head>
<body>
<!--程式碼對其：Ctrl+Alt+L -->
<input type="text" name="username"><br>
<input type="text" disabled value="不可用"><br>
<input type="radio" checked="checked" name="gender">單選按鈕
</body>
</html>

執行結果：（Chrome瀏覽器的執行結果）

使用CSS3偽類選擇器實現簡單手風琴效果，與其功能的介紹

1.展示 2.原理主要使用了C3選擇器中的兩個： ①：不（）：不包含，如DIV：否（。測試），就是DIV中選中不包含有試驗類的，例如可以配合E：否（：最後的型）來排除掉最後一個元素並選中剩餘的; ②：目標：目標的ID變為的location.hash的值時，也就是錨點選中它時選

CSS3偽類選擇器nth-child和nth-of-type淺析

1. nth-child 定義和用法 :nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的型別。n 可以是數字、關鍵詞或公式。 ① n為數字時，n為大於0的整數

IE下的CSS3偽類選擇器支援（原創理論）

自己測試過了，確實比較強大有木有，當css3.0出現以後，著實讓我興奮了好久，因為出現了很多選擇器，我們在也不用靠js做複雜判斷了。比如:nth-child，很容易就可以判斷奇偶物件 “:nth-child(2n)和:nth-child(2n+1)” 但是IE對css

CSS3偽類選擇器

1.以前用的偽類選擇器: :hover :link :active :visited CSS3中新增的偽類選擇器: 1) E:first-child 表示E的父元素的第一個子元素

css3偽類選擇器--動態偽類選擇器

動態偽類並不存在於html中，只有當用戶和網站互動的時候才會體現出來。動態偽類包含兩種，一種是在連結中常看到的錨點偽類，一種是使用者行為偽類。連結偽類選擇器：E:link（未被訪問過）和

CSS3----動態偽類選擇器

選擇 :focus orange ted link gre color img .com 5 1、link：超連接在沒被點擊之前的狀態； a:link{ color: red; } 2、visited：超鏈接在被點擊後的狀態；

CSS3----目標偽類選擇器

ott otto adding splay before text active tran near 效果：代碼： <!DOCTYPE html> <html> <head> <meta charset

css3基礎 :target 目標偽類選擇器簡單示例

pos url ctype itl w3cschool ont 錨點網頁 name 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

CSS3偽元素、偽類選擇器

first 偽類 ted :link sel OS lec 狀態 -s 偽元素選擇器： ::first-letter:為某個元素中的文字的首字母或第一個字使用樣式。 ::first-line:為某個元素的第一行文字使用樣式。 ::before:在某個元素之前插入一些

CSS3新增的偽類選擇器，讓你體驗使用CSS3的快感。

CSS選擇器用於選擇你想要的元素的樣式的模式。偽類元素主要用於對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。偽類選擇器 1.UI元素狀態偽類選擇器 UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選，UI元素狀態偽類選擇器有如下幾個。

CSS3新增的偽類選擇器

n+1 選擇器 out ack ava size 定義 html 限制　　偽類選擇器的作用：對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。CSS 3提供的偽類選擇器主要分為以下三類：結構性偽類選擇器 UI元素狀態偽類選擇器其他偽類選擇器　　

css3第四篇，選擇器三(偽類選擇器一）

偽類選擇器一語法：。指定選擇器特殊情況下的屬性以及屬性值結構偽類選擇器 1.:nth-child:根據定義的標籤順序,來給指定的標籤新增樣式。先找到符合順序的標籤，再匹配標籤是否符合設定的型別。選擇器作用 :first-child 所有標籤中

五分鐘帶你看完CSS3新增的偽類選擇器，讓你體驗使用CSS3的快感。

css3結構偽類選擇器first-child,last-child,nth-child(),nth-last-child()

1 element:first-child 選擇屬於其父元素的首個子元素的element元素注意：div:first-child 必須是其父元素下面的第一個子元素且必須是div元素才能匹配的到匹配結果： 2 同理：element:las

【CSS3】結構性偽類選擇器—not

:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素新增紅色邊框，CSS程式碼可以寫成： form { width: 200px;

CSS3否定偽類選擇器

否定偽類選擇器用來選擇不滿足某些條件的元素。表 2-6 結構偽類選擇器選擇器功能描述版本E:not(selector)選擇未被選擇器selector所選中，且型別為E的元素3如果想對某個結構元素使用樣式，但是又想排除這個結構下的某些子結構時，否定偽類選擇器就非常有用，它可以過

CSS3第一日--屬性選擇器與偽類選擇器

屬性選擇器在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素。 CSS3新增了3個新的屬性選擇器，分別是： 1、E[attr^="value"]:指定元素中的屬性名，並且這個屬性名有屬性值存在，且這個屬性值是以"value"開頭； 2、E[at

CSS3:nth-child()偽類選擇器，Table表格奇偶數行定義樣式

原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CS

CSS3選擇器--結構性偽類選擇器

在學習結構性偽類選擇器之前，先了解2個概念：CSS中的偽類選擇器和偽元素： 1、偽類選擇器：CSS中已經定義好的選擇器,不能隨便取名常用的偽類選擇

CSS3新增選擇器示例-偽類選擇器

一. 偽類選擇器介紹 1.1 首先了解下什麼是類選擇器類選擇器語法：.類名也就是標籤的class屬性值示例程式碼 <!DOCTYPE html> <html> <head> <title>

CSS3偽類選擇器

相關推薦