第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
本帖最后由 asp老师 于 2014-11-30 23:02 编辑那么我们在第五课当中，学习了css当中的类别的css应用，在css当中的写法为.加上类的名称 class="aaa" 即为.aaa首先我们来看此时的源码代码如下：
<font size="3"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--外联样式-->
<link href="05.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>道勤网免费学习</h1>
<h2>天道酬勤，要学习，来道勤！</h2>
<h3>免费交流学习！</h3>
<ul>
<li class="aaa">道勤网</li>
<li>学设计</li>
<li>淘宝美工</li>
<li>做网站</li>
<li class="ddd">一切都是可以从0开始</li>
</ul>
</body>
</html></font>此时的效果如下;
此时我们给这个无序列表都归一个类为 class="aaa"
好代码如下;
<font size="3"><ul>
<li class="aaa">道勤网</li>
<li class="aaa">学设计</li>
<li class="aaa">淘宝美工</li>
<li class="aaa">做网站</li>
<li class="aaa">一切都是可以从0开始</li>
</ul>
</font>
同时我们定义css文件为：
<font size="3">.aaa{color:#F00;}</font>
此时我们的效果如下;
如果我们想要第二个 学设计的这段文字颜色变为蓝色，我们相信该怎么做呢？方法如下;
1.我们改变这个 学设计的 class的名称，之后在到css文件里面，进行重新定义一个css的样式不就可以了吗.
2.我们到源代码当中，给这个学设计<li>学设计</li> 定义一个ID，好代码如下：<liid="abc"class="aaa">学设计</li>此时我们在返回到css当中，进行设定，代码如下
#abc{color:#00F;}此时效果如下;
这样呢我们就通过id的设置来对这个进行了修改。
我们总结下，
类的源代码写法为 类在css当中的修改代码为
class="aaa" .aaa{color:#F00;}
ID的源代码写法为 id在css当中的写法为
id="abc" #abc{#F00}
id具有单一性，当然可以用在相同的<ul>
<li class="aaa">道勤网</li>
<liid="abc"class="aaa">学设计</li>
<li class="aaa">淘宝美工</li>
<li class="aaa">做网站</li>
<liid="abc" class="aaa">一切都是可以从0开始</li>
</ul>
那么这个道勤网 和一切都可以是从0开始，都可以定义id="abc" 但是这样的话，在css当中修改的话，这2个会一起发生作用，所以id具有单一性，我们一般在一个页面只使用一个id名称；
类呢，可以写一样的，class="aaa" 同时呢，id和class都是一起出现的，比如
<li id="abc" class="aaa">一切都是可以从0开始</li>那么这样呢，id和class的css作用，都是会在css当中进行控制的。
点击查看其他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]