詳細介紹CSS的三種selector

來源:互聯網
上載者:User
  HTML selector
  HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如你用 CSS 定義了它們, 在整頁中, 這個 Tag 的性質就按照你的定義來顯示了. HTML selector 的文法如下
  tag {property:value}比如我們想叫 H1 的顏色是紅的H1 {color: red}這裡還要告訴你 CSS 的一個特點, 它可定義好幾個 selector 在一個 rule 裡. 比如 H1, H2, TD {color: red}這個定義就能讓所有的 H1, H2, 和 TD 的顏色都為紅色.
  Class selector
  Class selector 有兩種, 一種叫相關 class selector, 它跟一個 HTML 的 tag 有關係. 它的文法是tag.Classname {property:value}比如我們想叫一些而不是全部 H1 的顏色是紅的 H1.redone {color: red}這樣在下面的語句中, 第一個 H1 是紅色的, 而第二個就不是了
紅色的題目
普通的題目
第二種是獨立 class selector . 它可被任何 HTML tag 所應用. 它的文法如下 .Classname {property:value}假如我們有下面這個定義.blueone {color: blue}那麼我們可以把他應用到不同的 Tag 當中去. 比如
藍色的題目
藍色的段落
顯然 class selector 給了我們更多的自由.
  ID selector
  ID selector 其實跟獨立 class selector 的功能一樣. 而區別在於它們的文法和用法不同, 以及對於 javas cript 操縱 HTML
  元素有協助. 它的文法如下#IDname {property:value}假如我們有下面的定義#yelowone {color: yellow}我們可以運用這個定義到任何的有同樣 ID 名字的 tag, 比如 text here你可能覺得既然 ID selector 和獨立 class selector 功能一樣, 為什麼兩者都存在呢. 如果你知道用 CSS-P 來定位的話, 你就明白它們的區別了. 有 ID 的 HTML 元素可以被 CSS-P和 javas cript 來操縱。到現在為止, 你已經大概知道如何來寫 CSS 的定義了, 下面五節我們將會告訴你如何用 CSS 來操縱或修改。


聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.