CSS 選擇器詳解

hjavn發表於2021-09-02
CSS

工具與資源中心

幫助開發者更加高效的工作，提供圍繞開發者全生命週期的工具與資源
developer.aliyun.com/tool?spm=a1z3...

簡介

CSS選擇器是一種用於匹配HTML文件中元素的模式。關聯的樣式規則將應用於與選擇器模式匹配的元素。

選擇器是CSS最重要的方面之一，因為它們用於選擇網頁上的元素，以便可以設定樣式。您可以通過多種方式定義選擇器。

1.簡介

通用選擇器（用*星號或星號表示）與頁面上的每個單個元素匹配。如果目標元素上存在其他條件，則可以省略通用選擇器。此選擇器通常用於從元素中刪除預設的邊距和填充，以進行快速測試。

2.案例


    * {
        margin: 0;
        padding: 0;
      }

1.簡介

元素型別選擇器將文件樹中元素的每個示例與相應的元素型別名稱進行匹配。

2.案例


    p {
    color: blue;
  }

1.簡介

id選擇器用於為單個或唯一元素定義樣式規則。

ID選擇器的定義是一個井號（#），後跟ID值。

2.案例


    #p{
        color: red;}

1.簡介

類選擇器可用於選擇具有class屬性的任何HTML元素。具有該類的所有元素將根據定義的規則進行格式化。

用一個句號（.）緊隨其後的類值定義類選擇器。

2.案例


    .blue {
    color: blue;
      }

1.簡介

當需要選擇一個元素是另一個元素的後代時，可以使用這些選擇器。例如，如果您只想定位無序列表中包含的那些定位點，而不要定位所有定位點元素。

2.案例


        ul.menu li a {
        text-decoration: none;
        }
        h1 em {
        color: green;
        }

1.簡介

子選擇器只能用於選擇作為某些元素的直接子元素的那些元素。子選擇器由兩個或多個選擇器組成，兩個選擇器之間用大於號（即>）隔開。例如，您可以使用這些選擇器在具有多個級別的巢狀列表中選擇列表元素的第一級。

2.案例


    ul > li {
        list-style: square;
    }
    ul > li ol {
        list-style: none;
    }

1.簡介

相鄰的同級選擇器可用於選擇同級元素。該選擇器的語法類似於：E1 + E2，其中E2是選擇器的目標。

2.案例


    h1 + p {
    color: blue;
    font-size: 18px;
    }
    ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }

1.簡介

通用的同級選擇器與相鄰的同級選擇器（E1 + E2）類似，但不太嚴格。通用的同級選擇器由兩個簡單的選擇器組成，這些選擇器由波浪號（∼）字元分隔。可以這樣寫：E1〜E2，其中E2是選擇器的目標。

2.案例


    h1 ∼ p {
    color: blue;
    font-size: 18px;
    }
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
    }

1.簡介

樣式表中的多個選擇器通常共享相同的樣式規則宣告。您可以將它們分組為一個逗號分隔的列表，以最大程度地減少樣式表中的程式碼。它還可以防止您一遍又一遍地重複相同的樣式規則。

2.案例


    h1 {
        font-size: 36px;
        font-weight: normal;
       }
    h2 {
        font-size: 28px;
        font-weight: normal;
       }
    h3 {
        font-size: 22px;
        font-weight: normal;
       }

本文轉自：developer.aliyun.com/article/78926...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章