zoukankan      html  css  js  c++  java
  • CSS系列(6) CSS通配符详解

     

    通配符使用星号*表示,意思是“所有的”。

    平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称;

    也就是使用 * 加后缀名,就可以在电脑中搜索文件。

    在CSS中,同样使用 * 代表所有的标签或元素,它叫做通配符选择器。

    比如:* { color : red; } 这里就把所有元素的字体设置为红色。

    *会匹配所有的元素,因此针对所有元素的设置可以使用*来完成,用的最多的例子如下:

    *{margin:0px; padding:0px;}

    这里是设置所有元素的外边距margin和内边距padding都为0。

     

    不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。

     

    比如

     

    (1)淘宝

     

    blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;       padding:0}

     

     

     

    (2)腾讯

     

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

     

     

    (3)新浪

     

    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

     

     

     

    也就是将需要统一设置的元素使用分组选择器一次性设置;

     

    分组选择器的意思就是有相同设置的元素分为一组,使用逗号隔开,这样设置的样式就会对该组所有元素起作用。

     

     

    *通配符选择器的另一个用法是,给某个元素的后代设置相同的样式,比如要给class=”red”元素的后代设置粗体,让具有类red的后代元素的字体加粗,

    .red * { font-weight : bold; }

     

    页面源代码如下:

     

    <html>
    
    <head>
    
     
    
    <style type="text/css">
    
     
    
    .red { color:red;}
    
    .red * { font-weight : bold; }
    
     
    
    </style>
    
    </head>
    
    <body >
    
     
    
      <div class="red"> 
    
        <div> 
    
           长子div
    
              <div>
    
              孙子div
    
              </div>
    
        </div>   
    
      </div>
    
     
    
    </body>
    
    </html>

     

    效果:

     

                           

     

     

    那么,到底要不要使用通配符选择器呢?

     

    之所以不使用*通配符选择器,主要是因为网页打开速度,也就是性能原因。

     

    但是,对于性能,没有必要考虑的太多,只有当性能确实是个问题的时候,我们再优化也不晚。

     

    这一点,对初学者十分重要,以前我写程序,总是考虑性能,结果是浪费了时间。现在我基本都是怎么快怎么来,任务是有期限的,我们必须要抓紧时间,先把功能实现,后面再想着优化。

     

    因此,对于通配符选择器,只要你有需要,随时可以拿过来用。

     

    不过,一般公司都有封装好的公共样式表,直接拿来用就行了。

     

     

     

     

    本文参考了很多文章,下面是文章名称和地址,感兴趣的可以看一下。

     

     

    1,CSS * 选择器

    http://www.w3school.com.cn/cssref/selector_all.asp

    知识点:

    (1) * 选择器选取所有元素。

    (2) * 选择器也能选取另一个元素中的所有元素。

    2,谨慎使用CSS中的星号(*)通配符

    http://dudo.org/archives/2010050520544.html

    知识点

    (1)    当html多层次嵌套时,样式重复继承和渲染的次数增多,影响效率。

    结论:

    (1)    不要在在深层次的页面结构中使用它;

    (2)    不要在页面的根节点使用它;

    (3)    不要在距离目标节点较远的节点上使用它;

    (4)    最好在父级元素中使用。

    3,避免通配选择器

    http://www.douban.com/note/315614057/?type=like

    知识点:

    (1)    CSS选择器是从右到左进行规则匹配。与人们阅读顺序相反。

    (2)    最右边的规则往往决定了浏览器继续左移匹配的工作量,我们把最右边选择规则称之为关键选择器。

    例子:

    .selected * {color: red;}浏览器匹配文档中所有的元素后分别向上逐级匹配class为selected的元素,直到文档的根节点,因此其匹配开销是非常大的,通常比开销最小的ID选择器高出1~3个数量级,所以应避免使用关键选择器是通配选择器的规则。

    4,CSS通用元素选择器的都市流言

    http://shawphy.com/2010/11/css-universal-selector.html

    知识点

    (1)    由于CSS规则和HTML是并行载入的,因此把CSS放在HEAD中是非常有必要的。

    (2)    少使用 :last-child 。因为这个选择器无法索引起来,必须等DOM构件完,才能知道他是不是父元素中最后的那个元素。这种就非常慢了,慎用。

    结论:只要有需要,大胆的使用 * 吧,他不会给你从性能上增加额外的麻烦。

    5,关于css通配符性能问题不完全测试

    http://i.wanz.im/2012/01/03/performance_testing_about_css_universal_selector/

    结论:使用*通配符选择器的时间影响很小。

  • 相关阅读:
    Springboot-Static-Resource
    Springboot-Listener
    Springboot--servlet 、filter
    java 面试-- java框架-mybaits
    SVN备份教程(二)
    SVN备份教程(一)
    深入浅出MongoDB(三)环境搭建
    关于在c#中引用外部dll文件,在页面中找不到命名空间
    在win8中如何实现下拉刷新的功能
    C# treeview控件部分节点添加checkbox
  • 原文地址:https://www.cnblogs.com/workest/p/3943916.html
Copyright © 2011-2022 走看看