CSS常用伪类使用详解

首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after

1.用于链接的几个伪类元素

:link            用这个可以设置未被访问的链接的样式

:visited        用这个设置已经被访问的链接的样式

:hover          用于设置将鼠标悬浮在链接上的样式

:active          用于设置鼠标点击链接时到鼠标松开时的样式

:focus           用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）

上面的几个都比较简单。我简单以:hover为例。

W3Sschool
Google
Wikipedia

注释：:hover 选择器鼠标指针在其上浮动的链接设置样式。

上面的W3Sschool就是将鼠标浮动在上面的样式（背景为黄色），这里看不见鼠标是截图的鼠标自动消失了，事实上是存在的。

 

2.常用于列表元素的几个伪类

:first-child                  选中列表中的第一个元素

:last-child                   选中列表中的最后一个元素

:nth-child()                 括号里面的取值可以为三类：1)数字   :nth-child(3)表示选中父元素的第三个子元素

                                                                                 2)自变量为n的表达式     :nth-child(3n)代表选中父元素的第3,6,9.....3n的子元素

                                                                                 3)even或者odd     分别代表选中父元素的奇数或者偶数个子元素

:nth-last-child()         与 :nth-child()的不同点在于，这个是从最后一个元素开始计算，取值都是一样的。 

这是标题
第一个段落。
第二个段落。
第三个段落。
第四个段落。

注释：Internet Explorer 不支持 :nth-child() 选择器。

注意是p元素的父元素的第三个子元素哟，所以背景色才会出现在那个位置！！

 

3.:not()元素的使用

这个元素的使用很简单，举个栗子即可

这是标题

这是一个段落。

这是另一个段落。

这是 div 元素中的文本。




访问 W3School ！

选中非

的其他所有元素

 

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！