首页 > 代码库 > css中的伪类

css中的伪类

2024-09-21 17:10:40   219人阅读

1.伪类的语法

selector:pseudo-class {property:value;}

对应的中文：选择器：伪类｛属性：值；｝

 

2.anchor伪类

 1 <style type="text/css">
 2 /*anchor伪类的顺序是固定的，不变的*/
 3 /*未访问时的样式*/
 4     a:link{color: black;}
 5 /*访问过后的样式*/
 6     a:visited{color: pink;}
 7 /*鼠标划过时的样式*/
 8     a:hover{color:blue;}
 9 /*点击时的样式*/
10     a:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">这是一个链接</a>
16 </body>

 

3.css伪类

css伪类就是css与伪类配合使用。

语法：

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

 1 <style type="text/css">
 2 /*css伪类就是在选择器部分增加类选项*/
 3 /*未访问时的样式*/
 4     a.css:link{color: black;}
 5 /*访问过后的样式*/
 6     a.css:visited{color: pink;}
 7 /*鼠标划过时的样式*/
 8     a.css:hover{color:blue;}
 9 /*点击时的样式*/
10     a.css:active{color: red;}
11 </style>
12 
13 </style>
14 </head>
15 <a href="#">这是一个链接，但是不会有样式</a>
16 <a href="#" class="css">这是一个链接，会有样式</a>
17 </body>

 

css:first-child:

给相同标签的第一次出现的匹配样式，这个标签可以是被嵌套在其他标签里面。

 1 <style type="text/css">
 2 p:first-child{
 3     color: blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <div><p>这是第一次出现的p标签,有样式</p></div>
10 <p>这是第二次出现的p标签，无样式</p>
11 
12 </body>

更高级的模式：

可以设置其子类的样式

 1 <style type="text/css">
 2 p>i:first-child{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p>这是<i> 第一次 </i>第一次有样式</p>
10 <p>这是<i> 第二次 </i>第二次有样式</p>
11 
12 </body>

 

另一种方式：匹配相同元素的第一个下的某个所有的元素

 1 <style type="text/css">
 2 p:first-child i{
 3     color:blue;
 4 }
 5 </style>
 6 
 7 </style>
 8 </head>
 9 <p><i>有样式</i><i>有样式</i></p>
10 <p><i>无样式</i><i>无样式</i></p>
11 
12 </body>

 

4.lang伪类

lang伪类可以让你自己定义自己的语言，笔者发现各个教程和文档的定义比较难理解，但是观看代码比较直观一点。

 1 <style type="text/css">
 2 q:lang(no){
 3     quotes: "/" "/";
 4 }
 5 
 6 p:lang(it){
 7     background-color: yellow;
 8 }
 9 </style>
10 
11 </style>
12 </head>
13 <p>你可以定义<q lang="no">自己</q>的语言</p>
14 <p lang="it">你可以定义自己的语言</p>
15 
16 </body>

 

 

写在后面

伪类和伪元素的用法大致相同，这里就不再介绍了，有兴趣的同学可以查看相关文档教程。

 

css中的伪类


联系
我们