css之選擇器

時間 2019-11-24

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS之選擇器

一，CSS有三種方式引入樣式表：

1，內聯方式 Inline Styles

內聯定義便是在對象的標記內使用對象的 style 屬性定義適用其的樣式表屬性。
示例代碼：css

<p style="color:red">這一行的字體顏色將顯示爲紅色</p>

2,內部樣式塊對象 Embedding a Style Block

在你的 HTML 文檔的<head>標記裏插入一個<style>塊對象。
示例代碼：html

<style>
    .test2 {
        color: red;
    }
</style>

3,外部樣式表 Linking to a Style Sheet

先創建外部樣式表文件*.css，而後使用 HTML 的 link 對象。或者使用 @import 來引入。
示例代碼：瀏覽器

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Use @imports -->
<style>
  @import url("more.css");
</style>

二，選擇器的分類

1，標籤選擇器

<div>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>
<style type="text/css">
  p {
    color: blue;
  }
</style>

2,類選擇器

<div>
  <p>Sample Paragraph</p>
  <p class="special bold">Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>
<style type="text/css">
  p {
    color: blue
  }
  .special {
    color: orange;
  }
  .bold {
    font-weight: bold;
  }
</style>

3，id 選擇器

<div>
  <p id="special">Sample Paragraph</p>
</div>
<style type="text/css">
  #special {
    color: red;
  }
</style>

4,通配符選擇器

<div>
  <p>Sample Paragraph</p>
  <p>Sample Paragraph</p>
</div>
<style type="text/css">
  * {
    color: blue;
  }
</style>

5,屬性選擇器

<div>
  <form action="">
    <input type="text" value="Xinyang" disabled>
    <input type="password" placeholder="Password">
    <input type="button" value="Button">
  </form>
</div>
<style type="text/css">
  [disabled] {
    background-color: orange;
  }
  [type=button] {
    color: blue;
  }
</style>

6,僞類選擇器

<div>
  <a href="http://sample-site.com" title="Sample Site">Sample Site</a>
</div>
<style type="text/css">
  /* 僞類屬性定義有順序要求！ */
  a:link {
    color: gray;
  }
  a:visited {
    color:red;
  }
  a:hover {
    color: green;
    /* 鼠標懸停 */
  }
  a:active {
    color: orange;
    /* 鼠標點擊 */
  }
</style>