溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS中偽類選擇器和偽元素選擇器的示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
本篇文章給大家帶來的內容是關于CSS中偽類選擇器以及偽元素選擇器的介紹（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
1、鏈接偽類
/*鏈接偽類*/ 注意:link，:visited，:target是作用于鏈接元素的！ :link 表示作為超鏈接，并指向一個未訪問的地址的所有錨 :visited 表示作為超鏈接，并指向一個已訪問的地址的所有錨 :target 代表一個特殊的元素，它的id是URI的片段標識符
2、代碼實例：
01_錨點偽類.html
<head>
<meta charset="UTF-8">
<title></title>
<!--:link：表示作為超鏈接，并指向一個未訪問的地址的所有錨-->
<style type="text/css">
a{ text-decoration: none; }
a:link{ color: deeppink; }
#test:link{ background: pink; }
</style>
</head>
<body>
<a href="#">點我點我點我</a>
<p id="test">我是p啦</p>
</body>02_錨點偽類.html
<head>
<meta charset="UTF-8">
<title></title>
<!--:visited：表示作為超鏈接，并指向一個已訪問的地址的所有錨-->
<style type="text/css">
a{ text-decoration: none; }
a:link{ color: black; }
a:visited{ color: pink; }
</style>
</head>
<body>
<a href="#">點我點我點我</a>
</body>03_target.html
<head>
<meta charset="UTF-8">
<title></title>
<!--:target 代表一個特殊的元素，這個元素的id是URI的片段標識符。-->
<style type="text/css">
*{ margin: 0; padding: 0; }
p{ width: 300px; height: 200px; line-height: 200px; background: black; color: pink; text-align: center; display: none; }
:target{ display: block; }
</style>
</head>
<body>
<a href="#p1">p1</a>
<a href="#p2">p2</a>
<a href="#p3">p3</a>
<p id="p1">
p1 </p>
<p id="p2">
p2 </p>
<p id="p3">
p3 </p>
</body>1、動態偽類
/*動態偽類*/ 注意:hover，:active基本可以作用于所有的元素！ :hover 表示懸浮到元素上 :active 表示匹配被用戶激活的元素（點擊按住時） 注意： 由于a標簽的:link和:visited可以覆蓋了所有a標簽的狀態，所以當:link，:visited，:hover，:active同時出現在a標簽身上時 :link和:visited不能放在最后！！！
2、代碼實例：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test:hover{ color: pink; }
#test:active{ color: red; }
</style>
</head>
<body>
<p id="test">
我是test </p>
</body>1、隱私與:visited選擇器
/*隱私與:visited選擇器*/只有下列的屬性才能被應用到已訪問鏈接 ： color background-color border-color
1、表單相關偽類
/*表單相關偽類*/ :enabled 匹配可編輯的表單 :disable 匹配被禁用的表單 :checked 匹配被選中的表單 :focus 匹配獲焦的表單
2、代碼實例：
01_表單狀態.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
input { width: 100px; height: 30px; color: #000; }
input:enabled { color: red; }
input:disabled { color: blue; }
</style>
</head>
<body>
<input type="text" value="曉飛張" />
<input type="text" value="曉飛張" disabled="disabled" />
</body>02_表單狀態.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
input:checked { width: 100px; height: 100px; }
</style>
</head>
<body>
<input type="checkbox" />
</body>03_獲取焦點.html
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{ background: pink; }
p:focus{ background: pink; }
</style>
</head>
<body>
<input type="text" value="" />
<p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
</body>04_模擬單選框.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
label { float: left; margin: 0 5px; overflow: hidden; position: relative; }
label input { position: absolute; left: -50px; top: -50px; }
span { float: left; width: 50px; height: 50px; border: 3px solid #000; }
input:checked~span { background: red; }
</style>
</head>
<body>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
</body>1、結構性偽類
/*結構性偽類*/index的值從1開始計數！！！！ index可以為變量n(只能是n) index可以為even odd #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 這個子元素必須是ele #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素 除此之外:nth-child和:nth-of-type有一個很重要的區別！！ nth-of-type以元素為中心！！！ :nth-child(index)系列 :first-child :last-child :nth-last-child(index) :only-child (相當于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)) :nth-of-type(index)系列 :first-of-type :last-of-type :nth-last-type(index) :only-of-type (相當于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) :not :empty(內容必須是空的，有空格都不行，有attr沒關系)
2、代碼實例：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*子元素的標簽應該要統一*/
/*ul .item:nth-child(3){
border: 1px solid;
}*/
ul .item:nth-of-type(3){ border: 1px solid; }
/*ul p:nth-of-type(3){
border: 1px solid;
}
ul p:nth-of-type(3){
border: 1px solid;
}
ul li:nth-of-type(3){
border: 1px solid;
}*/
</style>
</head>
<body>
<ul>
<p class="item">p1</p>
<p class="item">p2</p>
<p class="item">p3</p>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<p class="item">p1</p>
<p class="item">p2</p>
<p class="item">p3</p>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
</body>04_not.html
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* { margin: 0; padding: 0; border: none; }
a { text-decoration: none; color: #333; font-size: 14px; display: block; float: left; width: 100px; height: 30px; }
p { width: 800px; margin: 0 auto; }
p>a:not(:last-of-type) { border-right: 1px solid red; }
</style>
</head>
<body>
<p>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</p>
</body>05_empty.html
<head>
<meta charset="UTF-8">
<title>empty</title>
<style type="text/css">
p { height: 200px; background: #abcdef; }
p:empty { background: #f00; }
</style>
</head>
<body>
<p></p>
<p>Second</p>
<p></p>
<p>Third</p>
</body>1、偽元素
/*偽元素*/ ::after ::before ::firstLetter ::firstLine ::selection
2、代碼實例：
after.html
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
p { width: 300px; height: 100px; border: 1px solid #000; }
p::after { content: "我在內容的后面"; }
</style>
</head>
<body>
<p>偽元素</p>
</body>before.html
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
p { width: 300px; height: 100px; border: 1px solid #000; }
p::before { content: "我在內容的前面"; }
</style>
</head>
<body>
<p>偽元素</p>
</body>firstLetter.html
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
p { width: 500px; margin: 0 auto; font-size: 12px; }
p::first-letter { color: #f00; font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<p>sssss</p>
</body>firstLine.html
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
p { width: 500px; margin: 0 auto; }
p::first-line { color: #f00; font-weight: bold; }
</style>
</head>
<body>
<p>
sssss<br> sssss <br> sssss <br>
</p>
</body>selection.html
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
p::selection { background: red; color: pink; }
</style>
</head>
<body>
<p>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</p>
</body>關于“CSS中偽類選擇器和偽元素選擇器的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
