第十课 div css 中css伪类元素的讲解和应用原理详解

asp老师 · 发表于 2014-11-30 19:30:54

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 asp老师于 2014-11-30 23:06 编辑

我们此时新建一个10.html文件，和一个10.css的文件，并且把这个10.css文件导入到10.html源代码当中，代码如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#" target="_blank">道勤网与您一起发展！学习</a><h1>
</body>
</html>

复制代码

此时呢，我们在给css当中定义一个css，改变a链接的颜色；代码如下

a{color:#933;}

复制代码

那么这样呢，我们就改变了此时的链接颜色！
如果是加为这样的css代码：

a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}

复制代码

我们来分析一下这个
a{color:#933;} 表示a标签的颜色为 #933
a:link {color:#933;} 这个表示的是没有访问过的链接颜色为 #933
a:visited{color:#9c6;} 这个表示的是访问过的链接颜色变为 #9c6

好我们在来看这段的 css代码：

a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}
a:hover{color:#009;}

复制代码

那么这个 a:hover{color:#009;} 表示的就是是当鼠标移动到a标签的时候，那么颜色变为#009颜色。
好我们在继续添加一个代码：

a{color:#933;}
a:link {color:#933;}
a:visited {color:#9C6;}
a:hover{color:#009;}
a:active{color:#F06;}

复制代码

那么我们此时看到这里有个a:active{color:#F06;} 那么这个表示的当我们鼠标左键点击的时候那么这个链接的颜色变为#F06 这个颜色。

不过我们来总结下，一般情况下用到这2个就可以的

a{color:#933;}
a:link {color:#933;}
a:hover{color:#009;}

复制代码

不是2个嘛，怎么会有三个代码呢，其实第一个代码和第二个代码的效果是一样的，所以我们可以这样来

a{color:#933;}
a:hover{color:#009;}

复制代码

------------------------------------------------------------------好此时我们修改代码为这样的代码：

a{color:#933;}
a:hover{color:#009; font-size:36px; background:#0C3;}

复制代码

好我们来分析这段代码：
首先呢：
1.刚开始a标签的链接颜色为 #933
2.当我们把鼠标放上去的时候：颜色变为#009 同时字体颜色变为36px 而且同时还有了背景颜色#0C3

效果如下：
刚开始的效果;

鼠标放上去的效果：

我们把这样的代码用到包含选择器中，看下是否好呢？好看下面代码
源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="http://www.baidu.com" target="_blank">道勤网与您一起发展！学习</a><h1>
<h2><a href="http://www.baidu.com" target="_blank">不错的地方</a></h2>
</body>
</html>

复制代码

css代码：

h1 a{color:#933;}
h1 a:hover{color:#009; font-size:36px; background:#0C3;}

复制代码

那么此时我们可以看到这样呢，之后h1 下的a标签才会起到作用，h2标签的内容是没有发生作用的。

点击查看其他div+css教程
第一节 div css基本书写规则和原理详细解答
第二节在div css当中并列标签的应用规则详解
第三节 div+ css中文字和图片背景的常用css熟悉详解
第四节div+css当中的内联样式和外联的区别讲解
第五节div+css当中 class类别选择符的应用详解
第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
第七课 div css当中组合选择符的应用和原理详解
第八课 div css 通配选择符和包含选择器的用法技巧
第九课 div css里面常用选择器的课程总结
第十课 div css 中css伪类元素的讲解和应用原理详解
第十一课 div css当中的背景图片的定位概念

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！