CSS 通用和分組選擇器(十)

一、通用選擇器

通用選擇器可能是所有選擇器中最強大的，卻使用最少的。通用選擇器的作用就像是通配符，它匹配所有可用元素。通用選擇器由一個星號表示。通用選擇器一般用來對象頁面上所有元素應用樣式

例如：可使用，以下規則刪除第個元素上的默認的空白邊界

*{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;
    }

分組選擇器堅持以下兩個原則

• 方便原則。不能為了分組而分組，如把每個元素、對象中具有相同的聲明都抽取出來分為一組，只能給自己帶來麻煩。此時定義一個類會理更方便
• 就近原則。如果幾個元素相鄰，並同處在同一個模塊內，可以考慮把相同聲明提取出來進行分組。理由便於分組，容易維護，也更容易理解