1. css里的偽類是什麼
偽類顧名思義就是假的，不存在的類，不是由class=""定義的，但元素可以具有同樣的一些屬性，比如滑鼠懸停，那麼此時就可以使用偽類，由瀏覽器指定它一個類，比如a:hover，效果近似於class="hover"，因為可以多次使用，所以叫偽類而不是偽ID，還有就是偽類通常是動態產生的，臨時的，並非常駐屬性。
2. css偽類選擇器有哪些
1、動態偽類選擇器
不同的狀態，使用不同的樣式。
E: link
E: visited
E: active
E: hover
E: focus
2、目標偽類選擇器
用來匹配頁面的URI中某個標識符的目標元素。
E: target
選擇匹配E的所有元素，且匹配元素被相關URL指向。
3、語言偽類選擇器
用來匹配使用指定語言的元素。
E: lang(language)
4、元素狀態偽類選擇器
當元素處於某種狀態下時，才起作用，在默認狀態下不起作用。
E: checked
eg: input[type="checkbox"]:checked{}
E: enabled
eg: input[type="text"]:checked{}
E: disabled
eg: input[type="text"]:disabled{}
5、結構偽類選擇器
這個就比較多了，平時用的也比較頻繁。
: nth-child
: nth-last-child
: nth-of-type
: nth-last-of-type
: first-child
: last-child
: only-child
: first-of-type
: last-of-type
: only-of-type
: root 匹配元素所有在文檔的根元素
: empty 選擇沒有子元素的元素，且不包含節點
6、否定偽類選擇器
E: not(F) 匹配所有除F外的E元素
3. CSS偽類和偽元素的區別及相關應用
偽類：用於向某些選擇器添加特殊的效果
偽元素：用於將特殊的效果添加到某些選擇器
偽類的效果可以通過添加實際的類來實現
偽元素的效果可以通過添加實際的元素來實現
它們的本質區別就是是否抽象創造了新元素
<p>
<em>This</em>
<em>is
a
text</em>
</p>
如果我想讓T這個字母單獨變成紅色，如果使用偽類的話，我需要找個標簽把t單獨包起來在進行設置對吧，但是我可以用偽元素::first-letter，來直接進行設置，換句話說要用偽類必須是實際存在的元素，而偽元素就不需要
本答案出自「我要編程」軟體開發師訓練平台免費課程。
4. 如何使用 CSS3 偽類
偽類選擇器分為結構性、子元素、 UI、動態和其它偽類選擇器
備註：為了更好的區分偽類和偽元素，書寫上CSS做了區分。例如，偽類 :first-child；偽元素
在下面的示例中：
div > p:only-child{
color:red; //不變紅
}
div > p:only-of-type{
color:red; //變紅
}
<div>
<p>test1</p>
<span>test2</span>
</div>
ul > li:nth-child(2){
color:red; //選擇該元素所有子元素的第二個子元素
}
ul > li:nth-last-child(2){
color:red; //選擇該元素所有子元素的倒數第二個子元素
}
ul > li:nth-of-type(2){
color:red; //選擇該元素所有該類型子元素的第二個子元素
}
ul > li:nth-last-of-type(2){
color:red; //選擇該元素所有該類型子元素的倒數第二個子元素
}
:target{
color:red; //定位到錨點，選擇此元素
}
//錨點的定位：
首先在HTML元素中定義一個ID屬性值，例如<p id="test">asd</p>
然後在瀏覽器地址欄，在URL最後加上#test，便可以定位到該錨點了。
錨點的使用：
可以用來將一篇很長的文章分段，
eg.<a href="#02">跳轉到</a>
<p id="02">……</p>
其實錨點只需name就可以可，加id是為了讓它兼容性更好
所謂UI選擇器：就是指定的樣式只有當元素處於某種狀態下時，才起作用，在默認狀態下不起作用！
瀏覽器兼容性：
E:hover 支持firefox、safari、Opera、ie8、chrome ------------
E:active 支持firefox、safari、Opera、chrome 不支持ie8
E:focus 支持firefox、safari、Opera、ie8、chrome -------------
E:enabled 支持firefox、safari、Opera、chrome 不支持ie8
E:disabled 支持firefox、safari、Opera、chrome 不支持ie8
E:read-only 支持firefox、Opera 不支持ie8、safari、chrome
E:read-write 支持firefox、Opera 不支持ie8、safari、chrome
E:checked 支持firefox、safari、Opera、chrome 不支持ie8
E::selection 支持firefox、safari、Opera、chrome 不支持ie8
E:default 只支持firefox ------------
E:indeterminate 只支持chrome ------------
E:invalid 支持firefox、safari、Opera、chrome 不支持ie8
E:valid 支持firefox、safari、Opera、chrome 不支持ie8
E:required 支持firefox、safari、Opera、chrome 不支持ie8
E:optional 支持firefox、safari、Opera、chrome 不支持ie8
E:in-range 支持firefox、safari、Opera、chrome 不支持ie8
E:out-of-rang 支持firefox、safari、Opera、chrome 不支持ie8
下面就其使用做詳細的說明;
1、選擇器E:hover、E:active和E:focus
1)、E:hover選擇器被用來指定當滑鼠指針移動到元素上時元素所使用的樣式
使用方法：
<元素>:hover{
CSS樣式
}
我們可以在「<元素>」中添加元素的type屬性。
例：
input[type="text"]:hover{
CSS樣式
}
2)、E:active選擇器被用來指定元素被激活時使用的樣式
3)、E:focus選擇器被用來指定元素獲得游標聚焦點使用的樣式，主要是在文本框控制項獲得聚焦點並進行文字輸入時使用。
例如：
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>選擇器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>
</head>
<body>
<h1>選擇器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="請輸入姓名">
<br/>
<br/>
密碼：<input type="password" placeholder="請輸入密碼">
</form>
</body>
</html>
2、E:enabled偽類選擇器與E:disabled偽類選擇器
1)、E:enabled選擇器被用來指定當元素處於可用狀態時的樣式。
2)、E:disabled選擇器被用來指定當元素處於不可用狀態時的樣式。
例如：
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled偽類選擇器與E:disabled偽類選擇器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
</head>
<body>
<h1>E:enabled偽類選擇器與E:disabled偽類選擇器</h1>
<form>
姓名：<input type="text" placeholder="請輸入姓名" disabled>
<br/>
<br/>
學校：<input type="text" placeholder="請輸入學校">
</form>
</body>
</html>
3、E:read-only偽類選擇器與E:read-write偽類選擇器
1)、E:read-only選擇器被用來指定當元素處於只讀狀態時的樣式。
2)、E:read-write選擇器被用來指定當元素處於非只讀狀態時的樣式。
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only偽類選擇器與E:read-write偽類選擇器</title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
</head>
<body>
<h1>read-only偽類選擇器與E:read-write偽類選擇器</h1>
<form>
姓名：<input type="text" placeholder="請輸入姓名" value="winson" readonly>
<br/>
<br/>
學校：<input type="text" placeholder="請輸入學校">
</form>
</body>
</html>
4、偽類選擇器E:checked、E:default和indeterminate
1)、E:cehcked偽類選擇器用來指定當表單中的radio單選框或者是checkbox復選框處於選取狀態時的樣式。
2)、E:default選擇器用來指定當頁面打開時默認處於選取狀態的單選框或復選框的控制項的樣式。
3)、E:indeterminate選擇器用來指定當頁面打開時，一組單選框中沒有任何一個單選框被設定為選中狀態時，整組單選框的樣式。
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked偽類選擇器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>checked偽類選擇器</h1>
<form>
房屋狀態：
<input type="checkbox">水
<input type="checkbox">電
<input type="checkbox">天然氣
<input type="checkbox">寬頻
</form>
</body>
</html>
默認的選擇項
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default偽類選擇器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>default偽類選擇器</h1>
<form>
房屋狀態：
<input type="checkbox" checked>水
<input type="checkbox">電
<input type="checkbox">天然氣
<input type="checkbox">寬頻
</form>
</body>
</html>
[html] view plain
<h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate偽類選擇器</h1><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate偽類選擇器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>indeterminate偽類選擇器</h1>
<form>
性別：
<input type="radio">男
<input type="radio">女
</form>
</body>
</html>
5、偽類選擇器E::selection
1)、E:selection偽類選擇器用來指定當元素處於選中狀態時的樣式。
例如
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>偽類選擇器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
</head>
<body>
<h1>偽類選擇器E::selection</h1>
<p>今天，開發搜索框，出現了bug，現在沒有找到原因！今天，開發搜索框，出現了bug，現在沒有找到原因！今天，開發搜索框，出現了bug，現在沒有找到原因！今天，開發搜索框，出現了bug，現在沒有找到原因！今天，開發搜索框，出現了bug，現在沒有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>
6、E:invalid偽類選擇器與E:valid偽類選擇器
1)、E:invalid偽類選擇器用來指定，當元素內容不能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容不符合元素規定的格式時的樣式。
2)、E:valid偽類選擇器用來指定，當元素內容能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容符合元素規定的格式時的樣式。
例如
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid偽類選擇器與E:valid偽類選擇器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
</head>
<body>
<h1>E:invalid偽類選擇器與E:valid偽類選擇器</h1>
<form>
<input type="email" placeholder="請輸入郵箱">
</form>
</body>
</html>
7、E:required偽類選擇器與E:optional偽類選擇器
1)、E:required偽類選擇器用來指定允許使用required屬性，而且已經指定了required屬性的input元素、select元素以及textarea元素的樣式。
2)、E:optional偽類選擇器用來指定允許使用required屬性，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式。
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required偽類選擇器與E:optional偽類選擇器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required偽類選擇器與E:optional偽類選擇器</h1>
<form>
姓名：<input type="text" placeholder="請輸入姓名" required>
<br/>
<br/>
學校：<input type="text" placeholder="請輸入學校">
</form>
</body>
</html>
8、E:in-range偽類選擇器與E:out-of-range偽類選擇器
1)、E:in-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內，且實際的輸入值在該范圍之內時的樣式。
2)、E:out-of-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內，但實際輸入值在超過時使用的樣式。
例如
[html] view plain
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range偽類選擇器與E:out-of-range偽類選擇器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:in-range偽類選擇器與E:out-of-range偽類選擇器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>
5. CSS偽類定義3種方法
CSS偽類用於向特殊狀態的選擇器添加特殊效果，使用最多的偽類是錨偽類。
a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 滑鼠移動到鏈接上,此偽類不止限於超鏈接上，其他元素也可使用
a:active 選定的鏈接
注意：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的；a:active 必須被置於 a:hover 之後，才是有效的；偽類名稱對大小寫不敏感。
偽類的使用是在選擇器後添加偽類，如selector:pseudo-class{color:red}, selector.class:pseudo-class{color:red}
註：pseudo-class表示偽類，但並無此偽類，selector表示選擇器。
CSS的偽類還有其他幾種：
:active 向被激活的元素添加樣式。
:focus 向擁有鍵盤輸入焦點的元素添加樣式。IE中必須聲明 <!DOCTYPE>，IE8以下不支持。
:hover 當滑鼠懸浮在元素上方時，向元素添加樣式。
:link 向未被訪問的鏈接添加樣式。
:visited 向已被訪問的鏈接添加樣式。
:first-child 向元素的第一個子元素添加樣式。IE中必須聲明 <!DOCTYPE>。
:lang 向帶有指定 lang 屬性的元素添加樣式。IE中必須聲明 <!DOCTYPE>，IE8以下不支持。
CSS中，還有偽元素，形態及使用方法類同偽類。
:first-letter 向文本的第一個字母添加特殊樣式。
:first-line 向文本的首行添加特殊樣式。
:before 在元素之前添加內容。
:after 在元素之後添加內容。
6. CSS中的偽類是什麼，有什麼用
CSS偽類(Pseudoclasses)是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudoclass{property:value;}，簡單地用一個半形英文冒號(:)來隔開選擇符和偽類。
CSS很多的建議並沒有得到瀏覽器的支持，但有四個可以安全使用的用在連接上的CSS偽類。
◆link用在為訪問的連接上。
◆visited用在已經訪問過的連接上。
◆hover用於滑鼠游標置於其上的連接。
◆active用於獲得焦點(比如，被點擊)的連接上。
a:link{color:red}
a:visited{color:green}
a:hover{color:blue}
a:active{color:orange}參考於
zhangbaoenji
的答案
7. 偽類選擇器hover的使用
定義和用法
:hover 選擇器用於選擇滑鼠指針浮動在上面的元素。
提示：:hover 選擇器可用於所有元素，不只是鏈接。
提示：:link 選擇器設置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用於設置指向已被訪問的頁面的鏈接，:active 選擇器用於活動鏈接。
注釋：在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效。
代碼效果測試：
<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:'微軟雅黑';}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>請把滑鼠指針移動到這些鏈接上。</p>
<p><a class="ex1" href="/index.html">這個鏈接改變顏色。</a></p>
<p><a class="ex2" href="/index.html">這個鏈接改變字體大小。</a></p>
<p><a class="ex3" href="/index.html">這個鏈接改變背景色。</a></p>
<p><a class="ex4" href="/index.html">這個鏈接改變字體。</a></p>
<p><a class="ex5" href="/index.html">這個鏈接會出現下劃線。</a></p>
</body>
</html>