HTML教程 - 伪类

分享于 

3分钟阅读

html

  繁體

伪类

HTML提供了伪类,这些类是默认定义的类,并允许我们在其中一种上应用样式:

请记住,CSS中没有内联伪类的方法。

链接

链接可以处于未访问状态或已访问状态,未访问的链接是未单击的链接,访问过的链接是一个被点击的链接。


<style>
a.special:link {
 color: green;
}

a.special:visited {
 color: red;
}
</style>

<p><a href="#">This is a standard link, it will become purple when clicked</a></p>
<p><a class="special" href="#">This is a special colored link and become red when clicked</a></p>

悬停

CSS :hover伪类可用于定义HTML元素的样式,用户在使用鼠标时将它悬停。


<style>
p:hover {
 background-color: yellow;
}
</style>
<p>Paragraphs now have a yellow background when hovering over them.</p>

活动和目标

CSS :active伪类定义用于当前被单击的元素的样式。


<style>
a:active {
 font-weight: bold; 
}
</style>
<p>
 <a href="#first">First Section</a>
 <a href="#second">Second Section</a>
 <a href="#third">Third Section</a>
</p>

导航到页面中的特定部分还允许设置目标元素的样式。


<style>
p:target {
 font-weight: bold; 
}
</style>
<p>
 <a href="#first">First Section</a>
 <a href="#second">Second Section</a>
 <a href="#third">Third Section</a>
</p>
<p id="first">This is the text of the first section.</p>
<p id="second">This is the text of the second section.</p>
<p id="third">This is the text of the third section.</p>

焦点

CSS :focus伪类定义用于focus元素的样式。


<style>
input:focus {
 font-weight: bold; 
}
</style>
<form>
 <p><input type="text" value="First field"></p>
 <p><input type="text" value="Second field"></p>
 <p><input type="text" value="Third field"></p> 
</form>


  learn  教程  classes  伪类  
相关文章