css伪类选择器 七种基本的css选择器
今天给各位分享css伪类选择器的知识，其中也会对七种基本的css选择器进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
谁能详细讲解一下CSS中的伪类选择器
和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种：
selector:pseudo-class{property: value}
例句：
a:link{color:red}
第二种：
selector.class:pseudo-class{property: value}
例句：
a.c1:link{color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link{color:#FF0000}/*未被访问的链接红色*/
a:visited{color:#00FF00}/*已被访问过的链接绿色*/
a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/
a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/
也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link{color:#FF0000}/*未被访问的链接红色*/
a.c1:visited{color:#00FF00}/*已被访问过的链接绿色*/
a.c1:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/
a.c1:active{color:#0000FF}/*鼠标点中激活链接蓝色*/
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
伪类有：:first-child，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
具体可以看看这个：
CSS :hover伪类选择器
:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时，可使用此选择器设置元素的样式；它可用于每个元素。
语法：
与hover相关的伪类:
●:hover选择器可用于所有元素，不仅是链接。
●:link选择器设置了未访问过的页面链接样式,
●:visited选择器设置访问过的页面链接的样式
●:active选择器设置当你点击链接时的样式
说明：为了产生预期的效果，:hover必须位于:link和:visited之后（如果存在的话），这样样式才能生效。
示例1：在悬停在元素上时更改背景颜色。
效果图：
示例2：在文本上悬停时显示隐藏的块
效果图：
更多HTML的相关知识，可访问： web前端自学！!
html 5 的CSS3新增的伪类选择器还包括哪些
:first-of-type p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-type p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-type p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-child p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
:nth-child(n) p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
:nth-last-child(n) p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。
:nth-last-of-type(n) p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:last-child p:last-child选择属于其父元素最后一个子元素每个<p>元素。
:root:root选择文档的根元素。
:empty p:empty选择没有子元素的每个<p>元素（包括文本节点）。
:target#news:target选择当前活动的#news元素。
:enabled input:enabled选择每个启用的<input>元素。
:disabled input:disabled选择每个禁用的<input>元素
:checked input:checked选择每个被选中的<input>元素。
:not(selector):not(p)选择非<p>元素的每个元素。
::selection::selection选择被用户选取的元素部分。
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！