CSS 通用和分组选择器(十)_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:07
Original
1027 people have browsed it

一、通用选择器

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

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

*{margin:0;padding:0;}
Copy after login

二、分组选择器

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

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

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

将以下样式改变

.class1{    font-size:13px;    color:red;    text-decoration:underline;    }.class2{    font-size:13px;    color:blue;    text-decoration:underline;    }
Copy after login

分组选择器使用

.class1{    color:red;    }.class2{    color:blue;    }    /*共同样式*/.class1,class2{    font-size:13px;    text-decoration:underline;    }
Copy after login

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

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

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!