CSS ID選擇器與CLASS選擇器

衣舞晨風發表於2015-08-22
  在 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>


相關文章