前端學習之CSS——選擇器的種類

css選擇器的做用

選擇器(選擇符)就是根據不一樣需求把不一樣的標籤選出來這就是選擇器的做用。 簡單來講，就是選擇標籤用的。
例如：找到全部的 h1 標籤， 選擇器（選對人）。設置這些標籤的樣式，好比顏色爲紅色（作對事）。

css基礎選擇器

基礎選擇器又包括：標籤選擇器、類選擇器、id 選擇器和通配符選擇器。

標籤選擇器

• 標籤選擇器（元素選擇器）是指用 HTML 標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的 CSS 樣式。
• 語法：

標籤選擇器{
        屬性：屬性值
        ...
    }

• 做用：
  標籤選擇器（元素選擇器）是指用 HTML 標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的 CSS 樣式。

類選擇器

• 若是想要差別化選擇不一樣的標籤，單獨選一個或者某幾個標籤，可使用類選擇器.
• 語法：

.類名 {
        屬性1: 屬性值1;  
        ...
    }

結構須要用class屬性來調用 class 類的意思<div class="類名"> 變紅色 </div>

1. 若是想要差別化選擇不一樣的標籤，單獨選一個或者某幾個標籤，可使用類選擇器。
2. 類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點「.」號顯示。
3. 類選擇器使用「.」（英文點號）進行標識，後面緊跟類名（自定義，咱們本身命名的）。
4. 能夠理解爲給這個標籤起了一個名字，來表示。
5. 長名稱或詞組可使用中橫線來爲選擇器命名。
6. 不要使用純數字、中文等命名，儘可能使用英文字母來表示。
7. 命名要有意義，儘可能使別人一眼就知道這個類名的目的。
8. 命名規範

多類名選擇器

• 咱們能夠給一個標籤指定多個類名，從而達到更多的選擇目的。 這些類名均可以選出這個標籤。簡單理解就是一個標籤有多個名字.
• 多類名的具體使用： <div class="red font20">亞瑟</div>
• 注意：
  1. 在標籤class 屬性中寫 多個類名
  2. 多個類名中間必須用空格分開
  3. 這個標籤就能夠分別具備這些類名的樣式

id選擇器：

• id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。HTML 元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以「#" 來定義。
• 語法：

#id名 {
            屬性1: 屬性值1;  
            ...
        }

注意：id 屬性只能在每一個 HTML 文檔中出現一次

id選擇器和類選擇器的區別：

1. 類選擇器（class）比如人的名字，一我的能夠有多個名字，同時一個名字也能夠被多我的使用。
2. id 選擇器比如人的身份證號碼，全中國是惟一的，不得重複。
3. id 選擇器和類選擇器最大的不一樣在於使用次數上。
4. 類選擇器在修改樣式中用的最多，id 選擇器通常用於頁面惟一性的元素上，常常和 JavaScript 搭配使用。

通配符選擇器：

• 語法：

* {
            屬性1: 屬性值1;  
            ...
        }

通配符選擇器不須要調用， 自動就給全部的元素使用樣式

* {
            margin: 0;
            padding: 0;
        }

選擇器總結