Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > CSS 通用和分组选择器(十)_html/css_WEB-ITnose

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

WBOY
Freigeben： 2016-06-24 11:46:07
Original
1083 Leute haben es durchsucht

一、通用选择器

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

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

*{margin:0;padding:0;}
Nach dem Login kopieren

二、分组选择器

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

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

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

将以下样式改变

.class1{    font-size:13px;    color:red;    text-decoration:underline;    }.class2{    font-size:13px;    color:blue;    text-decoration:underline;    }
Nach dem Login kopieren

分组选择器使用

.class1{    color:red;    }.class2{    color:blue;    }    /*共同样式*/.class1,class2{    font-size:13px;    text-decoration:underline;    }
Nach dem Login kopieren

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

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

    •  

    Verwandte Etiketten：
    CSS 通用和分组选择器(十)
    Quelle：php.cn
    Vorheriger Artikel：float：left 求解_html/css_WEB-ITnose Nächster Artikel：css3动画开发笔记_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    3
    2049
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    11
    2204
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1862
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1749
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1771
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage