码迷,mamicode.com
首页 > Web开发 > 详细

CSS 通用和分组选择器

时间:2017-06-13 23:45:39      阅读:402      评论:0      收藏:0      [点我收藏+]

标签:strong   对象   不同   size   删除   模块   tool   span   pre   

一、通用选择器

通用选择器可能是所有选择器中最强大的,却使用最少的。通用选择器的作用就像是通配符,它匹配所有可用元素。通用选择器由一个星号表示。通用选择器一般用来对象页面上所有元素应用样式

例如:可使用,以下规则删除第个元素上的默认的空白边界

*{margin:0;
padding:0;
}

 

二、分组选择器

分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。

/*定义所有级别的标题和段落行高为22px*/
h1,h2,h3,h4,h5,h6,p{
    line-height:22px;
}

分组选择器,可以使用逗号把同组内不同对象分隔。分组选择器与类选择器在性质上有点类似,都可以为不同元素或者对象定义相同的样式。

将以下样式改变

技术分享
.class1{
    font-size:13px;
    color:red;
    text-decoration:underline;
    }
.class2{
    font-size:13px;
    color:blue;
    text-decoration:underline;
    }
技术分享

分组选择器使用

技术分享
.class1{
    color:red;
    }
.class2{
    color:blue;
    }
    /*共同样式*/
.class1,class2{
    font-size:13px;
    text-decoration:underline;
    }
技术分享

分组选择器坚持以下两个原则

  • 方便原则。不能为了分组而分组,如把每个元素、对象中具有相同的声明都抽取出来分为一组,只能给自己带来麻烦。此时定义一个类会理更方便
  • 就近原则。如果几个元素相邻,并同处在同一个模块内,可以考虑把相同声明提取出来进行分组。理由便于分组,容易维护,也更容易理解

CSS 通用和分组选择器

标签:strong   对象   不同   size   删除   模块   tool   span   pre   

原文地址:http://www.cnblogs.com/zhengyuan1314/p/7004010.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!