CSS ID選擇器與CLASS選擇器

衣舞晨風發表於2015-08-22
CSS
  在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素。        
  屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

  三種基本的選擇器型別：標籤名選擇器、類選擇器、ID選擇器

具體語法如下：

 1、標籤名選擇器，如：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
即直接使用HTML標籤作為選擇器。

2、類選擇器

類選擇器允許以一種獨立於文件元素的方式來指定樣式。
該選擇器可以單獨使用，也可以與其他元素結合使用。
提示：只有適當地標記文件後，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。
要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。

       demo：

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景。

3、ID選擇器


小結：

那麼類選擇器與ID選擇器有啥區別呢？

ID 有高優先順序、唯一性的特點，特指「個體」。
相對於 ID，class 的優先順序比較適中，特指「特定群體」。
Class 的使用需要參考物件導向的抽象概念，把共有的屬性抽象出來。

ID是先找到結構/內容，再給它定義樣式；
Class是先定義好一種樣式，再套給多個結構/內容。

對於萬用字元：

由於不同瀏覽器對於同樣的頁面元素有不同的預設樣式，所以使用萬用字元星號（*）先將所有可能影響佈局的預設樣式統一一下是下十分必要的。而星號（*）匹配所有元素，省去了一個一個去寫元素名稱的麻煩。 

不過，由於*會匹配所有的元素，這樣會影響網頁渲染的時間，因此很多人開始停止使用*萬用字元選擇器，取而代之的是，把所有需要統一設定的元素，放在一起，一塊設定。

測試程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        /*id選擇器*/
        #rrrrr {
            background-color: red;
        }
        /*類選擇器*/
        *.important 
        {
            color: aqua;
            font-size:smaller;
        }
        /*類選擇器*/
        *.important2222
         {
            font-size:larger;
            background-color:black;
        }
    </style>
</head>
<body>
    <!--可以同時使用多個類-->
    <div class="important important2222"> 
    1、人生最精彩的不是成功的那一瞬間，而是回頭看，那段漆黑看似沒有盡頭、苦苦摸索的過程。其實，我只是很在意，在意在我所在意的人的心裡，我，在哪個位置。
    </div>
    <h1>
        1、人生最精彩的不是成功的那一瞬間，而是<span>3333333333</span>
    </h1>

    <p>
        2、生活再不如人意，都要學會自我溫暖和慰藉，<br />
        給自己多一點欣賞和鼓勵。生活就是童話，<br />
        只要心存美好，結局就會是美好。<br />
    </p>
    <p id="rrrrr">
        3、旁觀者的姓名永遠爬不到比賽的計分板上。
    </p>
    <p>
        4、強烈的信仰會贏取堅強的人，然後又使他們更堅強。
    </p>
    <p>
        5、只要我們能夢想的，我們就能實現。
    </p>
    <p>
        6、每一個成功者都有一個開始。勇於開始，才能找到成功的路。
    </p>
    <p>
        7、自棄者扶不起，自強者擊不倒。
    </p>
    <p>
        8、莫找藉口失敗，只找理由成功。（不為失敗找理由，要為成功找方法）
    </p>
    <p>
        9、昨晚多幾分鐘的準備，今天少幾小時的麻煩。
    </p>
    <p>
        10、只要路是對的，就不怕路遠。
    </p>

</body>
</html>


相關文章