【CSS 教學】 id、class 選擇器語法

Html中，要如何搭配CSS改變原始的樣式呢？

可以透過id、class來分別定義樣式

內容目錄

CSS id 選擇器語法

id 選擇器代表什麼意思呢？

可以針對特定 id 的 HTML 指定的樣式。

HTML中元素有一個id屬性是可以設定id選擇器

CSS中id的選擇器則是透過 “#”來定義：

那到底該怎麼寫呢？

可以參考下方寫法

本文章主要針對＃ id 選擇器寫法，因此沒有更深入的解說

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mark學習筆記</title>
    <style>
      #test{
             color:blue;
             font-size: 15px;
      }
    </style>
  </head>
  <body>
    <p>Css有分三種插入樣式，這是其中一種內部樣式表</p>
    <p>內部樣式表會放置在head內的style中</p>
    <br>
    <p id="test">這段落會因為CSS影響格式，因為有對應id的屬性</p>
    <p id="test1">此段落不會因為CSS影響格式，因為沒有對應的id屬性</p>
    <p>此段落不會因為CSS影響格式，因為沒有id屬性</p>
  </body>
</html>

CSS class 選擇器語法

那class 與 id 選擇器有什麼差別呢？

主要只是定義的名稱不同，其他都大同小異

要看每個人開發習慣使用的選擇器

本身自己是較習慣使用class 選擇器來做操作

id 的定義是 “#” ，而 class 的定義是 “.”

建議記錄下來，未來往網頁開發一定會常碰到

可參考下方 class 選擇器語法如何操作，其實跟id是差不多

我只有換一下定義的方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mark學習筆記</title>
    <style>
      .test{
             color:blue;
             font-size: 15px;
      }
    </style>
  </head>
  <body>
    <p>Css有分三種插入樣式，這是其中一種內部樣式表</p>
    <p>內部樣式表會放置在head內的style中</p>
    <br>
    <p class="test">這段落會因為CSS影響格式，因為有對應class的屬性</p>
    <p class="test1">此段落不會因為CSS影響格式，因為沒有對應的class屬性</p>
    <p>此段落不會因為CSS影響格式，因為沒有class屬性</p>
  </body>
</html>

文章內的程式碼都可以直接複製下來練習操作，或是直接套用到自己的專案都行！

多練習，對自已會有很大的幫助！

一回生二回熟，將所學習到內容變成自己的知識。

人就是要學習自己不會的事情，這樣才會不斷的成長、進步！

CSS id 選擇器 語法

CSS class 選擇器 語法

更多技術文章

Footer

CSS id 選擇器語法

CSS class 選擇器語法