css伪类总结

最新推荐文章于 2024-07-18 17:34:14 发布

曾吹雨

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量154

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45135068/article/details/107701318

版权

11 篇文章 0 订阅

订阅专栏

伪类将应用于未被访问的链接。IE6不兼容，解决此问题直接使用a标签

/* 未被访问过的超级链接 */
        a:link {
            color: red;
        }

伪类将应用于有鼠标指针悬浮停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容

/* 鼠标停留在超级链接后出现的样式效果 */
        a:hover {
            background-color: sandybrown;
            color: seagreen;
        }

伪类将应用于被激活的元素，如被点击的链接，被按下的按钮等

/* 鼠标点击后a标签产生的样式效果 */
        a:active{
            color: yellow;
        }

伪类将应用于已经被访问过的链接

  /* 被访问过的超级链接 */
        a:visited {
            color: purple;
        }

伪类将应用于拥有键盘输入焦点的元素

 a:focus{
            font-size: 20px;
        }

有时候我们对于li元素设置样式的时候需要区别化设置但是如果一个个添加类或者

实在太麻烦，这个时候写CSS时伪类的作用就体现出来了，：nth-child()尤其胜任这种情况，这个伪类将给我们带来极大的方便。
要使该属性生效，E元素必须是某个元素的子元素，用div包最好

:nth-child(an+b)这个元素首先找到当前元素的所有兄弟元素，紧接着将这些元素从1开始排序（1,2,3···）接着开始选取第an+b个元素（n取0,1,2,3···）

:nth-child()伪类举例：
:nth-child(0n+5)

作用：匹配第五个元素
:nth-child(2n)

作用：匹配第2,4,6···个元素，2n可以以关键词even来替代
:nth-child(2n+1)

作用：匹配第1,3,5···个元素，2n可以以关键词odd来替代
:nth-child(3n+4)

作用：匹配第4,7,10···个元素
:nth-child(-n+3)

作用：匹配前3个元素

关注