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>
写在后面
伪类和伪元素的用法大致相同，这里就不再介绍了，有兴趣的同学可以查看相关文档教程。