第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解

asp老师 · 发表于 2014-11-30 12:04:16

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

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

x

本帖最后由 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，好代码如下：

<li id="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>
<li id="abc" class="aaa">学设计</li>
<li class="aaa">淘宝美工</li>
<li class="aaa">做网站</li>
<li id="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当中的背景图片的定位概念

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