CSS伪类选择器

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

CSS伪类 伪类选择器

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

没用过，不知道。

本站文章除注明转载/出处外，均为本站原创或翻译，如若转载，请注明出处。

← → ↓ ↑
回复