无涯教程网

关注我们

CSS - 伪类

CSS - 伪类

CSS伪类是用来添加一些选择器的特殊效果。伪类的简单语法如下-

selector:pseudo-class {property: value}

CSS类也可以与伪类一起使用-

selector.class:pseudo-class {property: value}

最常用的伪类如下-

Sr.No.	Value & Remark
1	:link a:link 选择所有未访问链接
2	:visited a:visited 选择所有访问过的链接
3	:hover a:hover 把鼠标放在链接上的状态
4	:active a:active 选择正在活动链接
5	:focus input:focus 选择元素输入后具有焦点
6	:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
7	:lang p:lang(it) 为<p>元素的lang属性选择一个开始值

:link 伪类

选择所有未访问链接，下面的示例演示如何使用:link 类设置链接颜色。

<html>
   <head>
      <style type="text/css">
         a:link {color:#000000}
      </style>
   </head>

   <body>
      <a href="">Black Link</a>
   </body>
</html>

它将产生以下黑色链接-

:visited伪类

选择所有访问过的链接，下面的示例演示了如何使用:visited 类设置访问链接的颜色。

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600}
      </style>
   </head>

   <body>
      <a href="">Click this link</a>
   </body>
</html>

这将产生以下链接。单击此链接后，它将颜色更改为绿色。

:hover 伪类

把鼠标放在链接上的状态，下面的示例演示将鼠标指针移到链接上时，如何使用:hover 类更改链接的颜色。

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href="">Bring Mouse Here</a>
   </body>
</html>

它将产生以下链接。现在，将鼠标移到该链接上，您将看到它的颜色变为黄色。

:active伪类

选择正在活动链接，下面的示例演示如何使用:active 类更改活动链接的颜色。

<html>
   <head>
      <style type="text/css">
         a:active {color: #FF00CC}
      </style>
   </head>

   <body>
      <a href="">Click This Link</a>
   </body>
</html>

它将产生以下链接。当用户单击它时，颜色变为粉红色。

:focus伪类

选择元素输入后具有焦点，下面的示例演示如何使用:focus 类更改焦点链接的颜色。

<html>
   <head>
      <style type="text/css">
         a:focus {color: #0000FF}
      </style>
   </head>

   <body>
      <a href="">Click this Link</a>
   </body>
</html>

它将产生以下链接。当此链接成为焦点时，其颜色变为橙色。失去焦点时，颜色会变回原样。

:first-child 伪类

:first-child 伪类，要使:first-child在IE <!DOCTYPE>中工作，必须在文档顶部声明。

例如，要缩进所有<div>元素的第一段，可以使用此定义-

<html>
   <head>
      <style type="text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>

   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

它将产生以下输出-

:lang 伪类

以下代码针对所使用的语言适当地更改了<blockquote>标签-

<html>
   <head>
      <style type="text/css">
         
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   
   <body>
      <p>...<q lang="fr">A quote in a paragraph</q>...</p>
   </body>
</html>

:lang 选择器将应用于文档中的所有元素。但是，并非所有元素都使用quotes属性，因此大多数元素的效果是透明的。

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

AI技术内参 -〔洪亮劼〕

深入剖析Kubernetes -〔张磊〕

RPC实战与核心原理 -〔何小锋〕

检索技术核心20讲 -〔陈东〕

手把手带你写一个Web框架 -〔叶剑峰〕

超级访谈：对话张雪峰 -〔张雪峰〕

自动化测试高手课 -〔柳胜〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

深入拆解消息队列47讲 -〔许文强〕

好记忆不如烂笔头。留下您的足迹吧 :)