前端基础-伪类和伪元素

大家好,我是龙骑士,今天给大家介绍前端的一个基础内容:伪类和伪元素

伪类和伪元素

• 伪类:用于定义元素特殊状态

//selector:选择器,pseudo-class:伪类,property:属性,value:属性值
selector:pseudo-class{
    property:value;
}

锚伪类:连接能够以不同的方式显示

//未访问的连接
a:link{
    color:black;
};
//已访问的连接
a:visited{
    color:gray;
};
//鼠标悬浮在链接上
a:hover{
    color:red;
};
//已选择的链接
a:active{
    color:blue;
};

伪类和css类结合使用

<a class='clicp' href='' >我是链接</a>
//css样式表
a.clicp:visited{
    color:red;
}

利用hover写一个简单的提示功能

<div>把鼠标移到我身上去找p元素
<p>找到我了吗</p>
</div>

<style>
div:hover p{
    display:block;
}

p{
    diaplay:none;
    background-color:yellow;
    padding:20px;
}

:first-child 伪类与指定元素匹配

//匹配首个p元素
p:first-child{
    color:red;
}

//匹配首个p元素下的i元素
p i:first-child{
    color:red;
}

//匹配首个p元素下的所有i元素
p:first-child i{
    color:red;
}

        :focus 选择获取焦点的元素

        CSS中还有很多伪类,具体细节请查看点击这里查看更多伪类细节

• 伪元素
  
  CSS共右5个伪元素,分别是::before 在元素之前插入内容,::after 在元素之后插入内容,::first-letter 选取首个字母,::first-line 选取元素首行,::selection 匹配被用户选取的部分.