伪类分类

最新推荐文章于 2025-09-11 23:49:31 发布

转载最新推荐文章于 2025-09-11 23:49:31 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhl66/p/7528239.html

文章标签：

#人工智能

常见的伪类：

/*1/锚伪类 */
/*初试状态*/
a:link{
    color: green;
}
/*链接访问过后*/
a:visited{
    color: red;
}
/*鼠标经过*/
a:hover{
    color: yellow;
}
/*鼠标点击不放*/
a:active{
    color: blue;
}
/*改变自己*/
h1:hover{
    color: red;
}

/*选择器综合  伪类和包含选择器的综合*/
/*.two{
    display: none;
}*/
/*鼠标经过时的对象:hover 被改变的对象
 鼠标经过时的对象与被改变的对象是父子关系
 * */
/*.one li:hover .two{
    display: block;
}*/
/*鼠标经过时的对象:hover(+/~)被改变的对象
鼠标经过时的对象与被改变的对象是兄弟关系
 */
div:hover+p{
    font-size: 50px;
}
/*2/文本伪类*/
.w{
    color: red;
    font-size: 30px;
}
/*第一个字*/
.letter:first-letter{
    color: red;
    font-size: 30px;
}
/*第一行*/
.letter:first-line{
    color: blue;
}
/*在最前面添加内容*/
.letter:before{
    content: "1311 ";
}
/*在最后面添加内容*/
.letter:after{
    content: " after";
}
/*3/结构性伪类*/
ul{
    background: yellow;
}
/*.weilei .one{
    background: white;
}
.weilei .two{
    background: gainsboro;
}*/
/*css3新增*/
.weilei li:nth-child(2n-1){
    background: white;
}
.weilei li:nth-child(2n){
    background: gainsboro;
}
/*所有的孩子作为基数*/
/*.nth p:nth-child(2n){
    background: yellow;
}*/
/*只认p这个类型的孩子 作为基数*/
.nth p:nth-of-type(2n){
    background: yellow;
}
/*.nth h1:nth-child(2n){
    background: yellow;
}*/