首页 > 代码库 > css中的伪类
css中的伪类
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中的伪类
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。