当前位置: 网站建设 > 网页设计 > 建站经验 >

了解CSS的查找匹配原理 让CSS更简洁

时间:2013-03-02 03:51来源:未知 作者:admin 点击:

标签:了解CSS的查找匹配原理 让CSS更简洁 CSS(655)了解(15)原理(10)pspans2span(1)查找(4)匹配(6)简洁(10)
pspans2spanp 先查找html中所有class=red的span元素,找到后,再查找其父辈元素中是否有p元素,再断定p的父元素中是否有id为divBox的div元素, 了解CSS挂马及相应防范方法 ,如果都存在则匹配上。 div 简练、高效的CSS: 一般写法:#divBox p .red{color:red;}
了解CSS的查找匹配原理 让CSS更简洁》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233GH013.htm

  p>span>s2span>p>,了解CSS的优先级特性Specificity;

  先查找html中所有class="red"的span元素,找到后,再查找其父辈元素中是否有p元素,再断定p的父元素中是否有id为divBox的div元素,了解CSS挂马及相应防范方法,如果都存在则匹配上。

  div>

  简练、高效的CSS:

  一般写法:#divBox p .red{color:red;}

  说明: 同第一条,但假如你定义了多个.red,而且在不同的元素下是款式不一样,则不能去掉,好比你css文件中定义如下:

  正常写法:span.red

  style>

  解释: 由于ID取舍器是独一的,书写高效CSS应注意的七个问题,加上div反而增添不用要的匹配。

  p>span>s1span>p>,为你解答margin的一些疑问;

  

  span.red{color:#ff00ff}

  div>

  1.不要在ID抉择器前应用标签名

  3.尽量少使用层级关系

  更好写法:#divBox

  更好写法:.red{..}

  style>

  DIV#divBox p span.red{color:red;}

  4.使用class取代层级关联

Tag:查找匹配原理   CSS   查找匹配原理   CSS  ,为何没法从百度搜索获得流量;   body>,为什么要有交互设计和交互设计能够解决什么问题;

  p>span>s3span>p>

  如果是这样定义的就不要去掉,去掉后就会混杂,不外倡议最好不要这样写

  阅读器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比方之前说的 DIV#divBox p span.red{color:red;},浏览器的查找次序如下:

  更好写法:.block{display:block;}

  body>

  DIV#divBox p span.red{color:red;},按习惯咱们对这个CSS 的懂得是,浏览器先查找id为divBox的DIV元素,当找到后,再找其下的所有p元素,而后再查找所有span元素,为什么要使用CSS,当发明有span的class为red的时候,就利用该style。如许简略易懂的原理,可是这个理解却是完完整全相反、过错的。

  更好写法:.red

  匹配原理:

  2.不要再class挑选器前使用标签名

  p>span>

  如果按从左到右查找,哪会先查找到良多不相干的p跟span元素。而如果按从右到左的方法进行查找,则首先就查找到的元素。firefox称这种查找方式为key selector(要害字查问),为什么代码维护,重构比较难,所谓的症结字就是样式规则中最后(最右边)的规矩,上面的key就是span.red。

  浏览器从右到左进行查找的利益是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:

  所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,为什么人们喜欢翻页效果?,下面列出一些我们常见的写CSS犯一些低效错误(也是我以前经常犯的毛病,还老认为这样写才是高效的):

  个别写法:#divBox ul li a{display:block;}

  普通写法:DIV#divBox

  p.red{color:red,为什么中文网页的布局和英文网页布局差别那么大;}

--> [网站建设之]懂得CSS的查找匹配原理 让CSS更简洁

我们来学习一下CSS的匹配原理,我们来看1个简单的CSS:
(责任编辑:网站建设)
了解CSS的查找匹配原理 让CSS更简洁相关文章
上一篇:了解CSS的优先级特性Specificity 下一篇:了解下正规的WEB前端开发的具体规定
回到顶部