伪类选择器的使用方法(css伪类选择器hover)

扫码添加渲大师小管家，免费领取渲染插件、素材、模型、教程合集大礼包！

大家好，今天来介绍伪类选择器的使用方法的问题，以下是渲大师小编对此问题的归纳和整理，感兴趣的来一起看看吧！

CSS3中有哪些伪类选择器伪类选择器nthchild()怎么使用

CSS3中新的属性给我们带来了不少的便利，比如伪类选择器 nth-child()，但是它在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以设置更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。
:nth-child()选择某个元素的一个或多个特定的子元素；你可以按这种方式进行选择：
:nth-child(length);/*参数是具体数字 length为整数*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
例子：
li:nth-child(3){background:orange;}/*把第3个li的背景设为橙色*/
li:nth-child(3n){background:orange;}/*把第3、第6、第9、?、所有3的倍数的li的背景设为橙色*/
li:nth-child(n+3){background:orange;}/*选择从第3个元素后面的li背景设为橙色*/
li:nth-child(-n+3){background:orange;}/*选择橘逗脊从第3个指芦元素前面的li把背景设为橙色*/
li:nth-child(3n+1){background:orange;}/*这种方法是实现隔几选一的效果*/
:fist-child选择某个元素的第一个子元素
例子：
li:first-child {background: green;}/*把第1个li的背景设为绿色*/
:last-child选择某个元素的最后一个子元素
例子：
li:last-child {background: green;}/*把最后一个li的背景设为绿色*/
:nth-last-child()选择某个元素的一个或多个特定的子元圆渗素，从这个元素的最后一个子元素开始算
:nth-last-child()选择器和前面的:nth-child()很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。
例子：
li:nth-last-child(4) {background: red;}/*把倒数第4个li的背景设为红色*/
:nth-of-type()选择指定的元素
:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处。比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：
p:nth-of-type(even) {background-color: lime;}
除了可以将n设置为odd（偶数）或even（奇数）外，还可以将n设置为表达式，比如，nth-of-type(3n+2)
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算
这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。
同样在IE6-8和FF3.0-浏览器不支持这种选择器
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。
:only-child表示的是一个元素是它的父元素的唯一一个子元素

• 1
• 2

• 3

如果我需要在ul只有一个p元素的时候，改变这个li的样式，那么我们现在就可以使用:only-child,如：
ul li {padding-left:10px;}
ul li:only-child {padding-left:15px}
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素
是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素，比如说

如果我们想只选择中上面中的h2元素，我们就可以这样写，
h2:only-of-type{color:red;}
:empty选择的元素里面没有任何内容
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：
p:empty {display: none;}

css中伪类与伪元素如何使用

伪类可以通过link,hover等方法给选择器添加特殊效果，伪元素通过：first-line添加首行样式，：first-letter添加首字母样，以下将详细介绍这两方面的内容

伪类
它是选择html文档的某些部分的方式，表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态，原则上不属于html文档树本身及其元素或者是属性，其实CSS伪类是用来添加一些选择慧拍器的特殊效果，与伪元素不同，伪类可以出现在选择器链中的任何位置。
例
a：link 表示未访问过的链接

a:link{
background-color: pink;
}
a : visit表示已访问过的链接

a:visited{
background-color: pink;
}

a：hover当鼠标移动到链接上时

a:hover{
background-color: pink;
}
a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
a：active ：表示选中的链接

a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}
注意active一定要用在hover后面才会生效
伪前亩羡元素
伪元素用于向某些耐穗选择器设置特殊效果，而且只能应用于外部和文档级上下文 ， 而不是内嵌样式。它们可能只出现在选择器链的末尾，每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器或声明语句。
：first-line伪元素
用于向文本的首行设置特殊样式，只能用于块级元素
可以修改以下属性font，color，background，word-spacing，letter-spacing等
p:first-line
{
color: pink;
font-variant: small-caps;/*改为大写*/
}

you are very good!

适用首行
：first-letter伪元素
用于向文本的首字母设置特殊样式：
可以修改font，color，background，margin，padding，border等属性
p:first-letter
{
color: pink;
font-variant: small-caps;/*改为大写*/
}

you are very good!仅适用于首字母

总结：

css3怎么用伪类选择器不要第一个

一、X:nth-child(n) li:nth-child(3) { color: red;}接下来的几个伪类选择器使用上非常类似，功能也比较接近。 :nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。悉旁册 X:nth-child()用法实际上启蠢有三种变化，demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X:nth-last-child(n) li:nth-last-child(2) { color: red;}:nth-child(n)，是从第一个开始算索引，而X:nth-last-child(n)是从最后睁宏一个开始算索引。