第八课 div css 通配选择符和包含选择器的用法技巧
本帖最后由 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当中的 背景图片的定位概念
页:
[1]