CSS 偽類 (Pseudo-classes)實例
阿新 • • 發佈：2018-11-20
大小 查看 spa 方式 顯示 mon 選擇器 doc css
CSS 偽類 (Pseudo-classes)實例
CSS 偽類用於向某些選擇器添加特殊的效果
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
###########
偽類
W3C："W3C" 列指示出該屬性在哪個 CSS 版本中定義（CSS1 還是 CSS2）。
屬性 描述 CSS
:active 向被激活的元素添加樣式。 1
:focus 向擁有鍵盤輸入焦點的元素添加樣式。 2
:hover 當鼠標懸浮在元素上方時，向元素添加樣式。 1
:link 向未被訪問的鏈接添加樣式。 1
:visited 向已被訪問的鏈接添加樣式。 1
:first-child 向元素的第一個子元素添加樣式。 2
:lang 向帶有指定 lang 屬性的元素添加樣式。 2
#####################
1.超鏈接
本例演示如何向文檔中的超鏈接添加不同的顏色。
<style type="text/css">
a:link {color:#0000FF}
a:visited{color:#00FF00}
a:hover{color:#FF00FF}
a:active{color:#0000FF}
</style>
</head>
<body>
<p><b><a href="test1.html" target="_blank">這是一個鏈接</a></b></p>
<p><b>註釋：</b>在定義中，a:hover必須位於a:link 和 a:visited 之後，這樣才能生效！</p>
<p><b>註釋：</b>在Css定義中， a:active 必須位於a:hover 之後，這樣才能生效！</p>
2.超鏈接 2
本例演示如何向超鏈接添加其他樣式。
<style type="text/css">
a.one:link {color:#ff0000;}
a.one:visited{color:#0000ff;}
a.one:hover{color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited{color:#0000ff;}
a.two:hover{font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited{color:#0000ff;}
a.three:hover{background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited{color:#0000ff;}
a.four:hover{font-family:monospace}
a.five:link {color:#ff0000;text-decoration: none;}
a.five:visited{color:#0000ff;text-decoration: none;}
a.five:hover{color:#ffcc00;underline;}
</style>
</head>
<body>
<p>請把鼠標移動到這些鏈接上，以查看效果：</p>
<p><b><a class="one" href="test1.html" target="_blank">這個鏈接改變顏色</a></b></p>
<p><b><a class="two" href="test1.html" target="_blank">這個鏈接改變字體大小</a></b></p>
<p><b><a class="three" href="test1.html" target="_blank">這個鏈接改變背景顏色</a></b></p>
<p><b><a class="four" href="test1.html" target="_blank">這個鏈接改變字體系列</a></b></p>
<p><b><a class="five" href="test1.html" target="_blank">這個鏈接改變文本裝飾</a></b></p>
</body>
3.超鏈接：:focus 的使用
本例演示如何使用 :focus 偽類（無法在 IE 中工作）。
<style type="text/css">
input:focus{
}
</style>
</head>
<body>
<form action="test1.html" method="get">
First name:<input type="text" name="fname" /><br/>
Last name:<input type="text" name="lname" /><br/>
<input type="submit" value="Submit" />
</form>
<p><b>註釋：</b>如果已規定 !DOCTYPE，那麽 Internet Explorer 8 （以及更高版本）支持 :focus 偽類。</p>
</body>
4.:first-child（首個子對象）
本例演示 :first-child 偽類的用法。
<style type="text/css">
p:first-child{font-weight:bold;}
li:first-child{text-transform: uppercase;}
</style>
</head>
<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert key</li>
<li>Turn key<strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> Push the</p>
</div>
CSS 偽類 (Pseudo-classes)實例