收藏

下载资源 加入VIP,免费下载

第1页 / 共26页

第2页 / 共26页

第3页 / 共26页

第4页 / 共26页

第5页 / 共26页

页面效果

当然我们也可以将两个类别选择器换成id选择器，当然标签嵌套更多层的话，我们选择器也可以嵌套更多层，但是我们尽量让选择器之间的嵌套控制在三层。

二、动态伪类选择器

动态伪类选择器

选择器

功能

E:

link

加了超链接时的样式

E:

visited

访问过之后的样式

E:

hover

鼠标滑过的样式

E:

active

鼠标点击时的样式

动态伪类选择器，常给a标签使用，尤其是在IE6的年代，只能给a标签使用，但是在最新的浏览器，动态伪类选择器可以给任何一个标签使用。

另外还要注意一点，写动态伪类选择器时，还要注意他的顺序，他顺序一定按照定义:

link,:

visited,:

hover,:

active的顺序定义，要不有的浏览器会识别的不是很好。

方便大家记忆我们给其取个名字叫”爱情原则”,也就是”LoVeHAte”.好了，其实我们在学习a标签的时候，我们已经注意到了只要给文字添加了超链接，文字本身就会自带颜色，而这些效果往往不是我们不想要的。

我们需要从新定义文字的状态。

我们先来看一下原始状态。

代码：

DOCTYPEhtml>

加了超链接的文字状态

页面效果：

默认添加了超链接时的状态（：

link）：

文字颜色为蓝色，文字带有下划线。

默认添加了超链接时的状态（：

visited）：

文字颜色为紫色，文字带有下划线。

默认鼠标经过时的状态（：

hover）:

文字颜色为蓝色，文字带有下划线。

默认鼠标点时的状态（：

active）:

文字颜色为红色，文字带有下划线。

以上四种状态时默认的时候的状态，不是我们想要的，如果我们想改变，就要从新设置这四种状态的样子就可以了。

（因为我们学的样式还不多，所以我们主要还是以颜色为例，其实下划线及背景颜色等都是可以改变的）请看代码：

DOCTYPEhtml>

a:

link{color:

red;}/*红色*/

a:

visited{color:

blue;}/*蓝色*/

a:

hover{color:

greenyellow;}/*黄绿色*/

a:

active{color:

orange;}/*橙色*/

加了超链接的文字状态

页面效果

改变之后链接时（：

link）的状态：

文字颜色为红色，有下划线。

改变之后访问之后（：

visited）的状态：

文字颜色为蓝色，有下划线。

改变之后鼠标经过（：

hover）的状态：

文字颜色为黄绿色，有下划线。

改变之后鼠标点击（：

active）的状态：

文字颜色为橙色，有下划线。

其实我们在页面中看到的超链接的状态，不需要分设置这四种情况，这样设置的办法一是麻烦，二是浏览器中也存在着兼容问题（比如在谷歌浏览器中，给多个文字添加了超链接，我们只是点了其中一个，另其它的颜色都变成了访问过之后的了）。

所以我们平时只需要设置a标签的状态，他表示四个状态，然后我们再设置：

hover的状态，就把a标签的:

hover的状态给替换掉了。

就解决了以上两种问题。

代码：

DOCTYPEhtml>

a{

color:

red;/*红色*/

}

a:

hover{

color:

greenyellow;/*黄绿色*/

}

加了超链接的文字状态

加了超链接的文字状态

页面效果

这样的时候，这四种状态都是都是一样的颜色。

都是红色。

然后鼠标经过时是这样的：

鼠标经过时为黄绿色。

好了，动态伪类选择器我们就讲到这里，其它的状态等我们学了更多的CSS样式直接往里加就可以了。

三、结构性伪类选择器

结构性伪类选择器

选择器

功能

E:

first-child

匹配父元素的第一个子元素

E:

last-child

匹配父元素的最后一个子元素

E:

nth-child（n）

匹配父元素的第n个子元素

E:

nth-last-child（n）

匹配父元素的倒数第n个子元素E

E:

only-child

匹配父元素仅有的一个子元素E

E:

first-of-type

匹配同类型中的第一个同级兄弟元素E。

E:

last-of-type

匹配同类型中的最后一个同级兄弟元素E。

E:

only-of-type

匹配同类型中的唯一的一个同级兄弟元素E。

E:

nth-of-type（n）

匹配同类型中的第n个同级兄弟元素E。

E:

nth-last-of-type（n）

匹配同类型中的倒数第n个同级兄弟元素E。

好了，我们对以上的结构性伪类选择器不做全部讲解，我们只讲一些在制制作网页时常用到的，其它我们可以参考一下手册就可以学会了！

1.E:

first-child：

匹配父元素的第一个子元素

代码：

DOCTYPEhtml>

p:

first-child{

color:

red;

}

页面效果

2.E:

last-child匹配父元素的最后一个子元素

代码：

DOCTYPEhtml>

p:

last-child{

color:

red;

}

页面效果

3.E:

nth-child（n）匹配父元素的第n个子元素,注意n是从1开始的。

N的写法可以用多种，比如（2n、2n+1、odd、even等）

代码：

DOCTYPEhtml>

p:

nth-child

（2）{

color:

red;

}

页面效果

下面请看一个综合案例

DOCTYPEhtml>

li:

nth-child（even）{

color:

greenyellow;

}

li:

nth-child（odd）{

color:

deeppink;

}

li:

first-child{

color:

red;

}

li:

last-child{

color:

blue;

}

• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞

• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞
• 北国之美，雪花飘舞

页面效果

但是我们写代码的时候会遇到这种情况：

代码：

DOCTYPEhtml>

p:

first-child{

color:

red;

}

p:

nth-child（3）{

color:

blue;

}

仔细观察代码，第一个p标签已经不是div的第一个子元素了，所以再写p:

first-child是找不到这个标签的。

所以不会改变颜色，而nth-child（3）也是找到的是第二个p标签，因为h3才是div的第一个子元素，这样导致后面的代码都会出现跟真正理解上的不一样，这个时候我们需要：

of-type选择器。

页面效果

4.E:

first-of-type匹配同类型中的第一个同级兄弟元素E。

5.E:

last-of-type匹配同类型中的最后一个同级兄弟元素E。

6.E:

nth-of-type（n）匹配同类型中的第n个同级兄弟元素E。

DOCTYPEhtml>

p:

nth-of-type（odd）{

color:

greenyellow;

}

p:

nth-of-type（even）{

color:

deeppink;

}

p:

first-of-type{

color:

red;

}

p:

last-of-type{

color:

blue;

}

页面效果

好了，CSS3中的选择器有很多种，但是我们目前先讲这么多，等我们后面用到那种选择器的时候，再继续讲解，而且到后也非常的好理解了。

大家还记得样式的定义方式吗？

选择器{样式1：

样式值1;样式2:

样式值2;…},所以大家应该猜得到我们接下来应该讲解那些内容了吧，明天我们主要讲解的内容是CSS样式（CSS属性）。

育知同创教育版权所有