第八课 div css 通配选择符和包含选择器的用法技巧

asp老师 · 发表于 2014-11-30 16:18:46

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

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

x

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

那么我们在学习第八课的的时候呢，可以先回忆一下第七课的内容，下面是第七课的代码：这个是源代码：

<!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="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>道勤网</h1>
<h2>道勤网</h2>
<h3>道勤网</h3>
<h4>道勤网</h4>
<h5>道勤网</h5>
</body>
</html>

复制代码

这个是css代码：

h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

复制代码

好我们给它添加一个背景的效果，可以在css当中直接用body{color:#F102;}好，代码如下：

body{ background:#900;}
h1,h2,h3,h4,h5{color:#3F0; background:#330; font-weight:900;}

复制代码

此时效果如下：

如果此时我们把这个body{background:#F00;} 代码改为;

*{ background:#900;}

复制代码

我们此时可以看到效果没有发生变化，那么如果在我们的css代码当中，只有*｛｝这一个的话，那么代码如下：

此时呢，我们看到这个*{} 所起到的作用就是控制所有的页面，
我们就把这个*{}称为通配符。好此时我们把css里面的代码清空。返回到源代码当中；

我们重新写代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#">道勤网</a></h1>
<h2><a href="#">道勤网</a></h2>
<h3><a href="#">道勤网</a></h3>
<h4><a href="#">道勤网</a></h4>
<h5><a href="#">道勤网</a></h5>
<p><a href="#" target="_blank">道勤网一起免费学习</a><br/><span><a href="#">道勤网QQ群226547332</a></span>
</body>
</html>

复制代码

我们来分析下这个代码：

首页呢，在<title></title>之下</head>之前链接了一个名称为07.css的文件，
其次在body内文当中，有5句分别用<h1>到<h5>的标签来写的道勤网的字体，同时这每段字体都加了一个链接<a href="#"></a>链接的地址为#就是空链接的意识；

再次；在最后有2个句话，道勤网一起免费学习，前面用<p>标签断开。之后也给这段用<p>标签断开的文字加了一个空的链接而且这个链接打开的方式为target="_blank" 新的打开方式。

最后，在道勤网QQ群226547332这里呢，用<br/>标签我们进行了换行，同时给这个文字道勤网QQ群226547332 我们用了<span></span>标签；并且我们给这个文字添加了链接 href="#"

那么我们此时的效果如下;

大家可以看到目前是蓝色的，这是因为我们用了<a href="#"> </a>这样的标签，如果我们想要该更这个标签的颜色的话，我们该如何操作呢.
好我们此时可以在css当中定义我们的css代码；代码如下：

a{color:#C00;}

复制代码

那么这样我们就这个颜色进行了更改的。当然我们也可以通过id="" 或者是类class="" 设置这几个选择器之后，在来改变这个选择器的样式也是可以进行更改的，
那么效果如下;

这里要提醒大家注意的一个点就是，我们此时要改变的是这个<a></a>标签的颜色，而不是这个<h>标签的颜色，所以有很多新手朋友们在这里可能会直接在css当中写到
h{color:#0ff;}
这样写呢，我们会发现是没有什么效果的。所以大家这个概念一定是要区分开的。好，我们继续往下面的知识点看；
如果此时，我们想要把这个第一个道勤网的链接变化一个颜色呢，其他的颜色不发生变化，（当然也是可以通过设置类和id进行设置，但是我们不通过这个方法进行设定，我们换个其他的方法，大家有没有知道的呢？好，下面我们来看今天非常重要的一个知识点；）

看css代码：

<blockquote>a{color:#F00;}

复制代码

这个代码是什么意识呢？
1.首先呢，标签为a的颜色为#F00
2，其次呢，把h1 标签下的 a标签的颜色变为0F0
那么效果如下;

这个

h1 a{color:#0F0;}

复制代码

就是包含选择器；
h1之后呢空格在写标签a 之后在定义内容就可以的。
---------------------------------------------------------------------
好，那么如果我们想要对这个<p>标签里面的内容进行单独定义a标签的颜色，我们该如何操作呢？
看css代码：

p a{color:#9C9;}

复制代码

那么这样就可以的。
它的源代码为

<!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="07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1><a href="#">道勤网</a></h1>
<h2><a href="#">道勤网</a></h2>
<h3><a href="#">道勤网</a></h3>
<h4><a href="#">道勤网</a></h4>
<h5><a href="#">道勤网</a></h5>
<p><a href="#" target="_blank">道勤网一起免费学习</a></p><br/><span><a href="#">道勤网QQ群226547332</a></span>
</body>
</html>

复制代码

完整的css代码如下;

a{color:#F00;}
h1 a{color:#0F0;}
p a{color:#9C9;}

复制代码

那么今天我们学到了这个 *｛｝通配选择器和包含选择器 p a{ }的用法，大家不懂的可以好好看下这个教程哦。

点击查看其他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在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！