css僞類選擇器
僞類經過冒號來定義，他定義了元素的狀態，如點擊按下、點擊完成等等。咱們以前都是直接操做元素的樣式
如今能夠爲元素的狀態改變樣式，使元素看上去更「動態」。
僞類選擇器：css
1.E：link
2.E：visited
3.E：hover
4.E：active
5.E：not（）
6.E：first-child
7.E：last-child
8.E：only-child
9.E：empty
10.E：checked
11.E：nth-child（n）html
1.E：link
設置超連接a在未被訪問時的樣式（特指a標籤）
a：link{color：red；} 未訪問時a的顏色，設置別的元素沒有效果，它和直接給a設置顏色不一樣是a{color：red；}
表明了整個a元素的樣式，不分訪問前訪問後。瀏覽器
2.E：visited
設置超連接a在其連接地址一杯訪問過期的樣式（特指a標籤）
a：visited{color：yellow}
1和2的例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a:link{color: red;}
a:visited{color: yellow;}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
未點擊時的顏色是紅色，點擊事後的顏色是黃色。app
3.E：hover
設置鼠標懸停在元素上時的樣式，不限於a標籤，p、li標籤也可使用。一般可結合背景圖的變換完成許多效果。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a:link{color: red;}
a:visited{color: yellow;}
a:hover{color: blue;}
</style>
</head>
<body>
<a href="#">百度</a>
</body>
</html>
懸停時顏色爲藍色。post
4.E：active
設置元素在鼠標按下時的樣式（不限於a標籤）例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li{
display: inline-block;
list-style: none;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
font-family: "microsoft yahei";
}
ul li:hover{
background-color: #ff4400;
color: #FFFFFF;
}
ul li:active{color: yellow;}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>第一頁</li>
<li>第二頁</li>
<li>首頁</li>
<li>第一頁</li>
<li>第二頁</li>
</ul>
</body>
</html>字體
5.E：not（s）匹配不含有s選擇器的元素E。例子：ui
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
div:not(#div2){color: red;}
</style>
</head>
<body>
<div class="d1">塊元素</div>
<div class="d1">塊元素</div>
<div class="d1">塊元素</div>
<div class="d2 d1">塊元素</div>
<div class="d3" id="div2">塊元素</div>
</body>
</html>
除了最後一行其餘的所有爲紅色。orm
6.E：first-child（父元素的第一個子元素E）htm
要使該元素生效，E元素必需要是某個元素的子元素，通常元素都是body的子元素，因此均可以使用此僞類，
而body標籤不是子元素，因此 body：first-child{ background：#ddd }是無效的。
這個屬性的意思是被選中元素自己是子元素，而且是它父元素的第一個。示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
li:first-child{color: red;}
/*ul li{display: inline-block;list-style: none;}*/
</style>
</head>
<body>
<ul>
<p>sdsdasd</p>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
</body>
</html>
此例有序列表下的第一個列表項爲紅色，無序列表下沒有紅色的由於p不是ul的子元素，而li也不是第一個了。input
7.E：last-child 父元素的最後一個子元素E。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
/*ul li{display: inline-block;list-style: none;}*/
li:last-child{color: red;}
</style>
</head>
<body>
<ul>
<p>sdsdasd</p>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
</body>
</html>
顯示爲無序和有序最後一個列表都爲紅色。
8.E：only-child 元素是惟一子元素時被匹配。例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
ul:only-child{color: red;}
</style>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
</body>
</html>
此例顯示li所有爲紅色。
9.E：empty ：empty選擇器匹配沒有子元素（包括文本節點）的每一個元素。（不明白？）
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
p:empty{background-color: red;}
</style>
</head>
<body>
<p>這是練習段落</p>
<p></p>
</body>
</html>
10.E：checked ：checked選擇器匹配每一個已被選中的input元素（只用於單選按鈕和複選框）。不適用於全部瀏覽器。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
input:checked{background: red;}
</style>
</head>
<body>
<form action="" method="post">你喜歡什麼吃的（多選）：
<input type="checkbox" name="fruit" id="apple"/><label for="apple">蘋果</label>
<input type="checkbox" name="fruit" id="li"/><label for="li">梨</label>
<input type="checkbox" name="fruit" id="banana"/><label for="banana">香蕉</label>
</form><hr />
<form action="" method="post">你喜歡誰：
<input type="radio" name="xingbie" id="boy" /><label for="boy">男的</label>
<input type="radio" name="xingbie" id="girl" /><label for="girl">女的</label>
</form>
</body>
</html>
此例我用edge瀏覽器單選按鈕點擊後顏色變了。
11.E：nth-child（n）選擇器匹配屬於其父元素的第n個子元素，不論元素的類型。 n能夠是數字、關鍵詞或公式。例子：<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> li:nth-child(2){font-size: 30px; color: orange;} </style> </head> <body> <ul> <li>劉亦菲</li> <li>范冰冰</li> <li>楊冪</li> <li>袁姍姍</li> </ul> </body></html>此例范冰冰字體變爲30像素，顏色是橘黃色。
- 1. css--css選擇器，僞類
- 2. css選擇器-僞類選擇器
- 3. css選擇器2——僞類選擇器
- 4. CSS僞類選擇器
- 5. css僞類選擇器
- 6. 5.CSS 僞類選擇器
- 7. CSS 3 僞類選擇器
- 8. CSS 僞類選擇器
- 9. css 僞類選擇器
- 10. 選擇器、僞類、僞類選擇器
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • XQuery 選擇 和 過濾 - XQuery 教程
- • Kotlin學習（二）基本類型
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css--css選擇器，僞類
- 2. css選擇器-僞類選擇器
- 3. css選擇器2——僞類選擇器
- 4. CSS僞類選擇器
- 5. css僞類選擇器
- 6. 5.CSS 僞類選擇器
- 7. CSS 3 僞類選擇器
- 8. CSS 僞類選擇器
- 9. css 僞類選擇器
- 10. 選擇器、僞類、僞類選擇器