CSS伪类选择器

in 技术分享 / 0 评论 / 205阅读

CSS有很多伪类,伪类也构成了很多好看的样式,这篇文章主要总结一下伪类,顺便做做笔记

:link

:link主要应用在超链接上,未点击的样式。

<style>
a:link{
    color: #2196f3;
}
</style>
<a href="https://google.com">google</a>

:link

:visted

:visted主要也是应用在超链接上,访问过后的样式。

<style>
a:visted{
    color: #ff9800;
}
</style>
<a href="https://google.com">google</a>

:visted

:active

:active鼠标点击时到鼠标松开时的样式,可用在链接、按钮等

<style>
a:active{
    color: #ff5722;
}
</style>
<a href="https://google.com">google</a>

:active

:hover

:hover鼠标经过(浮动)样式,可用在任何元素上。

<style>
a:hover{
    color: #3f51b5;
}
</style>
<a href="https://google.com">google</a>

:hover

:nth-child

:nth-child()可以设置第几个的样式,也可以使用倍数2n,3n,2n-1等实现间隔效果。

<style>
li:nth-child(2n){
    color: #ff9800;
}
</style>
<ul>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
</ul>

:first-child/:last-child

如名字一样,first-child设置首个样式,last-child设置最后一个样式

<style>
li:first-child{
    color: #673ab7;
}
li:last-child{
    color: #ffeb3b;
}
</style>
<ul>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
    <li>AAAA</li>
</ul>

:focus

:focus获取焦点时样式,主要用于表单输入等

<style>
input:focus{
    box-shadow: 0 0 5px 3px #ffc107;
}
</style>
<input type="text">

:focus

:valid/:invalid

再input使用某些验证时,:valid,正确匹配显示的样式。:invalid,不正确匹配显示的样式。

<style>
input:valid{
    box-shadow: 0 0 5px 3px #4caf50;
}
input:invalid{
    box-shadow: 0 0 5px 3px #f44336;
}
</style>
<input type="email" >

:valid

:invalid

:required

:required当input含有required属性时的样式,主要也是表单。

<style>
input:required{
    box-shadow: 0 0 5px 3px #2196F3;
}
</style>
<input type="text" required>

:required

:disabled

:disabled当input含有disabled属性时的样式。

<style>
input:disabled{
    box-shadow: 0 0 5px 3px #9e9e9e;
}
</style>
<input type="text" disabled>

:not

没用过,不知道。

回复