深圳搬家搬厂网站建设公司
当前位置:网站首页 > 建站百科 > 深圳网站开发类选择器与id选择器的区别 返回列表

深圳网站开发类选择器与id选择器的区别

发布时间:2022-02-22来源:admin
<p> 通常,网站建设公工程师都很难解释,甚至自己都分不清楚类选择器和ID选择器,网站建设选择器实在是太丰富了,也不一定要分的很清楚,但是作为高端工程师,我们就应该要认真辨别各位工具的利弊,达到用最小化代价创造最大化价值,学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢? </p> <p> 网站开发类选择器与id选择器的区别:W3C标准这样规定的,其一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。其二:当页面中用到js或者要动态调用对象的时候,要用到id 控制页面总共有四种方式行内方式、内嵌方式、链接方式、导入方式, 通过这四种方式就可以实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。CSS选择器共有三种:标签选择器、ID选择器、类选择器。 为了后面的对选择器的解释更容易理解,在这里先打个比喻,如果把你所处的环境视为HTML页面的话,环境里的每一个人则相当于HTML页面内标签元素,每个人都有一个ID(身份证),那么html中的每一个标签也都有自己的ID,大家都知道ID是唯一的,不可能重复。 </p> 【标签选择器】一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下:<br /> p{<br /> &nbsp;font-size:12px;<br /> &nbsp;background:#900;<br /> &nbsp;color:090;<br /> }<br /> &nbsp;复制代码<br /> 则页面中所有p标签的背景都是#900(红色),文字大小均是12px,颜色为#090(绿色),这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改background属性就可以了,就这么容易!【ID选择器】ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次,不过就不符合W3C标准了,那页面也就不是标准页面喽~,咱们的目的不就是为了做标准的页面么,所以建议大家不要在同一个html页面中多个标签拥有共同的ID),就像在你所处的环境中,你只有一个ID(身份证),不可能重复!相信大家也能看出来,ID选择器更<br /> 具有针对性,如:<br /> 先给某个HTML页面中的某个p标签起个ID,代码如下:<br /> &lt;pid="one"&gt;此处为p标签内的文字&lt;/p&gt;<br /> 复制代码<br /> 在CSS中定义ID为one的p标签的属性,就需要用到#,代码如下:<br /> #one{<br /> font-size:12px;<br /> background:#900;<br /> color:090;<br /> }<br /> 复制代码<br /> 这样页面中的某个p就会是CSS中定义的样式。【类选择器】这种选择器更容易理解了,就是使页面中的某些标签(可以是不同的标签)具有相同的样式,就像国庆中某个方阵中,肯定都是不同的人,却均穿红色衣服,手中高举花环,样式都是一样的,如果想让这一类人都有共同的样式,该怎么做呢~呵呵,和ID选择器的用法类似,只不过把id换做class,如下:<br /> &lt;pclass="one"&gt;此处为p标签内的文字&lt;/p&gt;<br /> 复制代码<br /> 如果我还想让div标签也有相同的样式,怎么办呢?加上同样的class就可以了,如<br /> 下&lt;divclass="one"&gt;此处为p标签内的文字&lt;/div&gt;<br /> 复制代码<br /> 这样页面中凡是加上class="one"的标签,样式都是一样的喽~<br /> CSS定义的时候和ID选择器差不多,只不过把#换成.,如下<br /> .one{<br /> font-size:12px;<br /> background:#900;<br /> color:090;<br /> }<br /> 复制代码<br /> 补充:一个标签可以有多个类选择器的值,不同的值用空格分开,如:<br /> &lt;div class="one yellowleftStyle"&gt;此处为p标签内的文字&lt;/div&gt;<br /> 复制代码<br /> 这样我们可以将多个样式用到同一个标签中,当然也可以,ID和class一块用<br /> &lt;div id="div1" class="one yellowleftStyle"&gt;此处为p标签内的文字&nbsp;<br /> &lt;/div&gt;<br /> 复制代码<br /> 【通用选择器】<br /> 到这里,前三种基本的选择器说完了,但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”<br /> *{此处为CSS代码}<br /> 复制代码<br /> 强大之处是因为他对父级中的所有HTML标签进行样式定义,可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式),这样可以大大精简代码;既然有这么强大的功能为什么是用的最少呢,同样还是因为他的强大,他是对父级元素内的所有标签进行定义,所以只要你定义了,那么父级里面的所有的标签,甭管有没有必要,也都相当于加上了通用选择器里面的代码了,能这么说大家不能够完全理解,没关系,我给大家举个例子,请看下面:<br /> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br /> &lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;<br /> &lt;head&gt;<br /> &lt;meta http-equiv="Content-Type"content="text/html; charset=gb2312" /&gt;<br /> &lt;title&gt;无标题文档&lt;/title&gt;<br /> &lt;style type="text/css"&gt;<br /> &lt;!--<br /> #div1 *{<br /> background:#eee;<br /> color:#333;<br /> }<br /> --&gt;<br /> &lt;/style&gt;<br /> &lt;/head&gt;<br /> &lt;body&gt;<br /> &lt;div id="div1"&gt;<br /> &lt;p&gt;这里是p标签区域&lt;/p&gt;<br /> &lt;div&gt;这里是a标签区域&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div id="div2"&gt;<br /> &lt;p&gt;这里是p标签区域&lt;/p&gt;<br /> &lt;div&gt;这里是a标签区域&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/body&gt;<br /> &lt;/html&gt;<br /> 复制代码<br /> 大家运行一下上面的例子,div1里面的两个标签是不是样式一样,这就是通用选择器的强大之处,不管里面有多少个标签都会将样式加到所有标签内,如果div1里面得所有的标签都有一部分相同的CSS代码,那么可以把这部分代码提取出来,用通用选择器来定义,这样可以大大缩减代码,但是如果div1里面只要有一个和其他元素没有相同的代码,就不能用通用选择器来定义,这也就是CSS通用选择器不灵活的一点。现在大家明白为什么通用选择器是选择器里面功能最强大的但又是用的最少的选择器了吧~~呵呵<br /> 对于通用选择器还有一个不得不提的用法,就是为了保证作出的页面能够兼容多种浏览器,所以要对HTML内的所有的标签进行重置,会将下面的代码加到CSS文件的最顶端<br /> *{margin:0; padding:0;}<br /> 复制代码<br /> 为什么要这么用呢,因为每种浏览器都自带有CSS文件,如果一个页面在浏览器加载页面后,发现没有CSS文件,那么浏览器就会自动调用它本身自带的CSS文件,但是不同的浏览器自带的CSS文件又都不一样,对不同标签定义的样式不一样,如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的,那么我们就需要对对HTML标签重置,就是上面的代码了,但是这样也有不好的地方,因为HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上了{margin:0;padding:0;},在这里我不建议大家这么做,因为89个标签中需要重置的标签是很少数,没有必要将所有的标签都重置,需要哪些标签重置就让哪些标签重置就可以了,如下<br /> body,div,p,a,ul,li{margin:0; padding:0;}<br /> 复制代码<br /> 如果还需要dl、dt、dd标签重置,那就在上面加上就可以了,如下<br /> body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}<br /> 复制代码<br /> 用到那些就写那些,这点也可以看做衡量页面重构师制作页面水平的高低,以及是否专业的一个方面<br /> 到这里大家更应该明白这句话“通用选择器是功能最强大但是用的最少的选择器”了吧~^_^<br /> OK!选择器的内容我向大家应该都明白了,后面就继续讲解一下“选择器的集体声<br /> 明”和“选择器的嵌套”<br /> 【选择器的集体声明】<br /> 在我们使用选择器的时候,有些标签样式是一样的,或者某些标签都有共同的样式<br /> 属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:<br /> h1,h2,h3,h4,h5,h6{color:#900;}<br /> 复制代码<br /> #one,#three,.yellow{font-size:14px;}<br /> #one{background:#ccc;}<br /> #three{background:#ccc;}<br /> .yellow{background:#ccc;}<br /> 复制代码<br /> 和小学的提取公因式差不多,把共同的部分提取出来,这么做的好处,相同的部分<br /> 共同定义,不同的部分单独定义,保证风格统一,样式修改灵活,这也是优化CSS代<br /> 码的一块,要记住哟~<br /> 【选择器的嵌套】<br /> 选择器也是可以嵌套的,如:<br /> #div1 p a{color:#900;}<br /> 复制代码<br /> 这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义<br /> class选择器或者ID选择器,CSS代码不就少了嘛~同样也是CSS代码优化的一块。<br /> 到这里,基本的选择器说完了,但是还需要给大家介绍一个“通用选择器”<br /> *{此处为CSS代码}<br /> 复制代码<br /> &nbsp;【三种CSS代码选择器、选择器的声明、选择器的嵌套三块知识】<br /> 网站开发类选择器与id选择器的区别。作为一名网站建设工程师,最重要的是要合理的使用工具,让工具代替人工去做一些不必要的工作。网站建设是一个细致而健全的工作,学会用心去发现,去稳固网站建设的精华。<br /> <br />
联系方式:   0755-84185494

阅读过此文章的读者,还阅读过下面的文章

  • 深圳网站制作好后来年到期了该怎么办
    <p> 深圳网站制作好后来年到期了该怎么办,不管是个人还是公司,要想制作好一个网站真的不容易,不仅仅需要做网站前期的规划和策划工作,还需要对网站建设的栏目,内容进行填充和建设,面对这一堆的要求和东西,整体还是比较麻烦和费事的,所以,网站建设制作好之后,一定要注意来年的续费问题,好多公司不注意这个问题,造成了网站后期打不开了,不能正常方面了,出现了问题才想起来网站没有续费,接下来我们来看看深圳网络公司是如何建议的。 </p> <p> 1.域名到期的影响<br /> &nbsp;一般情况下,网站域名需要一年进行一次续费,也可以一次购买多年,如果域名到期没有及时续费,网站就会打不开,域名续费期一般是一个月,过了这个时间就会进入赎回期,这时候就不能续费了。<br /> &nbsp;2.服务器到期的影响<br /> &nbsp;服务器到期与域名一样,到期后网站同样不能打开,如果之前网站在做推广,会直接影响展现效果,长时间不续费的话,网站数据就会全部删除了,之前的努力就全白做了。<br /> &nbsp;3.网站维护服务到期<br /> &nbsp;有些网络公司服务商会有网站维护费用,一般都是一年为一个期限,如果到期后您没有及时维护,网站出现问题后就不会有人给您维护,就会造成影响。影响最大的就是网站展现的效果。<br /> </p>
  • 深圳做网站公司做网站时要明白这些
    <p> 深圳做网站公司做网站时要明白这些。其实做网站有的时候不仅仅是在做网站,更多的是在帮助其他公司在做网络宣传门户,站在这个角度上你就知道你所承担的责任了,作为现在公司网站建设不仅要符合时代潮流,更多的需要紧扣时代网页设计特色和要求,只有这样制作设计出来的网站才能更好的满足现在人们的使用要求和观念的,不管是在网站设计理念,网站布局规划,以及网站内容建设等等,这些方面都需要进口时代主题和要求的,接下来我们来看看深圳网站制作公司是如何做的,需要做好那些方面的要求和规范呢? </p> <p> 审美在变,网站设计要紧跟潮流<br /> 也许用户访问时,不会逐一阅读网站内容,但首先映入眼帘的一定是设计。也许网站在几年前设计制作的确实很漂亮,但是我们无法否认的事实是,用户对网站设计的审美一直在不断改变。这个比较容易对比,随便找一个行业,然后通过百度搜索到十家网站,分别对应年份和网站的网址,让一个不知情的人去逐一打开并评判感受。大体趋势是越是新近设计制作的网站,越容易赢得用户的接受承认。其实这就是用户的真实感受,每年快速改版重做对于很多公司来说有些压力,但是笔者认为一般而言网站2-3年是需要重新设计制作快速的。一个通过网站寻找供应商的用户,其浏览网站一般也就几十秒到几分钟时间,先进的网站设计效果是吸引其深入了解进而咨询的较好方法。<br /> 技术在变,网站制作要贴合需求<br /> 周围的一切都在发生着巨变,网站技术也是如此,此前被很多网站公司采用的ASP网站开发语言几乎已经没人使用,相对于传统的PC端网站,现在更多看重的是移动端,公司设计制作的网站现在多为自适应PC端、PAD端以及手持移动终端的响应式网站。谁也不知道网站技术会走向哪个方向,但是对于普通的企业而言,我们可以把握趋势,至少每隔两三年对网站重新快速设计制作。<br /> 企业在变,网站建设要适应发展<br /> 网站总是为企业服务的,换句话说就是网站的设计制作需要跟上企业的发展步伐。现在急剧变化的市场面前,如果想立于不败之地,企业的经营策略一定在不断调整优化。作为给企业发展提供服务的网站,其理应不断调整不断优化以适应公司需求。现在是互联网时代,用户了解公司更多的也是通过网络,网站不仅是营销的工具,更是企业品牌形象的展示窗口。由于人力成本的不断升高,而网站设计更多的需要技术人员手工完成,所以真正定制开发的网站都价格不菲。但是同样是网站建设公司网站改版也不一定就选择定制,如果有合适的模板网站,也是不做的选择。我们需要的是一个紧跟时代和用户需求的网站,而非一定采用哪种方式实现它。 </p>
  • 英文网站制作需要注意那些问题和事项
    英文网站制作需要注意那些问题和事项。英文网站制作还是跟中文网站制作有比较大的区别的,应为中文网站面对的客户群体是国内的用户,而国内的用户对网站的使用习惯,要求都是跟国外不一样的,从而在制作英文网站的时候,一定要注意,像这种英文网站制作还是需要从国外人使用网站的习惯,使用网站的一些喜好出发,只有这样制作出来的网站满足国外人的使用的,这是一个方面,另外一个方面就是国外网站面对的搜索引擎,也是不一样的,国外的搜索引擎跟国内有着比较大的区别的,搜索引擎也是制作英文网站必须要考虑的一个方面了,最后就是网站制作价格方面了,一般英文网站制作价格要比国内的网站制作价格高一些,这是一定的,毕竟国外网站制作的细节要求,以及针对搜索引擎优化方面还是有比较高的要求的,所以,这些都是工作量,也都是需要处理好这些方面的细节工作的。
  • 网站设计公司的发展趋势详解
    <p> 网站设计公司的发展趋势详解,目前网页设计公司慢慢的转型升级成为一种综合性的设计公司了,不仅仅是在网站设计了,如果单纯的依赖于网站设计,对于这样的公司来说现在还是很被动的,并且目前的网站制作价格已经白热化了,竞争也是很大的情况下,好多公司已经赚不到什么钱了,面对这样的市场形式,作为网站设计公司要不断的扩大和尝试新的方式和方法,实现公司业务的升级和转型,这也是摆在深圳<a href="http://www.szbc888.com" target="_blank"><strong>网站制作公司</strong></a>面对不可逾越的一个问题了,毕竟现在网站制作公司的活量不大,如果养一个专业的网页设计技术团队专门作网站,根本养活不了这样的公司的发展了,更多的还需要通过其他的渠道,其他的平台上获得更为有质量的客户,这也是当下网站制作公司不得不面对的一个话题了。 </p> <p> <img src="static/picture/20231030113846_47114.jpg" alt="" /> </p> <p> <a href="http://www.szbc888.com" target="_blank"><strong>网页设计公司</strong></a>业务范围扩大,于是着这个网站制作行业市场需求量在逐渐的缩小,并且凡是使用到网站的多半集中在一些公司,单位方面的需求了,对于一些个人对网站的需求还是很少的,除非一些专业化路线的个人才会这样做的,网站设计公司的转型升级,不仅提升的服务质量,更多的将服务方位不断的扩大,从而得到更好的市场群体,能够为更多的市场客户服务。 </p>
  • 网站制作低价格策略已经成为网站制作行业的杀手锏
    <p> 网站制作低价格策略已经成为网站制作行业的杀手锏,整个大环境不好的情况下,好多公司在制作网站的时候,已经在想尽办法降低网站制作的成本了,从当初的网站制作就直接去搜索引擎上搜索网站制作公司了,而如今制作网站已经发生变化了,从搜索引擎走向了淘宝,拼多多这些低价平台了,并且这些平台都是担保交易了,好多的需要<a href="http://www.szbc888.com" target="_blank"><strong>制作公司网站</strong></a>的商家慢慢转向这个方面来了,所以制作出来的网站不是模板的就是仿制的网站,价格的确很低,并且效率也是很高的,这也是聪明的用户慢慢的转型和变化了,如果这些模板网站放在搜索引擎来的客户的话,这些网站制作下来的费用基本上在好几千了,面对这样的市场转型和升级,这也让好多网站制作公司寻找不同的出路了。 </p> <p> <img src="static/picture/20231030113212_16069.jpg" alt="" /> </p> <p> <a href="http://www.szbc888.com" target="_blank"><strong>深圳网站制作</strong></a>的价格的确没有那么低,但是作为一些低价平台上的用户,他们为了争取到客户,低价引流,从而实现了低价格制作网站的形式,作为网站制作公司,你这样低价格去做的目的就只有一个,那就是辛苦转不到钱的,都是转一些辛苦钱而已,面对这样的市场形式和要求,作为网站制作公司一定要不断的提升网站制作的附加值,提升<a href="http://www.szbc888.com" target="_blank"><strong>网站制作</strong></a>的质量,让用户以质量取胜,不能专门走低价格战略,不然你的公司是发展不起来的,也作不大的,作为用户而已,你公司小还可以这样去做,如果公司发展到一定程度的去制作网站,这对于你的公司来说是灭顶之灾了,所以选择网站制作公司还是要从专业的角度出发去帮助客户解决实际的问题,从而实现网站制作公司的价值和效益。 </p>
  • 深圳网站定制开发全流程详解
    <p> 深圳网站定制开发全流程详解,作为网站定制开发公司接下来给大家普及一下网站定制究竟要经过那些过程呢,前期的网站沟通肯定是少不了的,除此之外,网站备案这块也是需要的,只要是正规的公司,正常的流程,网站备案也是需要做的,剩下的就是网站制作过程中的一些沟通了,接下来我们来看看<a href="http://www.szbc888.com" target="_blank"><strong>深圳网站制作</strong></a>公司的一个标准的流程。 </p> <p> 需求分析: 通过对客户业务的了解和与客户对流程的讨论对需求进行基本建模,最终形成需求规格说明书<br /> 总体设计: 通过分析需求信息,对系统的外部条件及内部业务需求进行抽象建模,最终形成概要设计说明文档<br /> 详细设计: 此部分在对需求和概要设计的基础上进行系统的详细设计(也包含部分代码说明)<br /> 开发编程: 对系统进行代码编写<br /> 测试分析与系统整合: 对所有功能模块进行模拟数据测试及其它相关性测试并整合所有模块功能<br /> 现场支持: 系统上线试运行进行现场问题记录、解答<br /> 系统运行支持: 系统正式推产后,对系统进行必要的维护和BUG修改<br /> </p>

Copyright © 2015 深圳市鑫惠广网络科技有限公司 粤ICP备2023111395号