一.CSS基礎語法;
1.1 語法解釋
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
1.2 案例解釋
下面這行代碼的作用是將 h1 元素內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖爲您展示了上面這段代碼的結構：
提示：請使用花括號來包圍聲明。
二.CSS選擇器分類
2.1 元素選擇器
最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。
如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
HTML文檔
<body>
<h1>我是h1標籤,目前被元素選擇器選擇</h1>
</body>
CSS文檔
h1 {color:blue;}
2.2 類型選擇器
在 W3C 標準中，元素選擇器又稱爲類型選擇器（type selector）。
“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”
因此，我們也可以爲 XML 文檔中的元素設置樣式：
XML:文檔
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>我是to標籤,目前被類型選擇器選擇</to>
</note>
CSS文檔:
to {color:blue}
2.3 類選擇器
類選擇器允許以一種獨立於文檔元素的方式來指定樣式。
該選擇器可以單獨使用，也可以與其他元素結合使用。
提示：只有適當地標記文檔後，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。
要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器
修改 HTML 代碼
在使用類選擇器之前，需要修改具體的文檔標記，以便類選擇器正常工作。
爲了將類選擇器的樣式與元素關聯，必須將 class 指定爲一個適當的值。請看下面的 HTML 代碼：
HTML文檔:
<body>
<h1 class="important">
我是h1標籤,我被類選擇器選擇.
</h1>
<p class="important">
我是p標籤,我被類選擇選擇.
</p>
<body>
語法
然後我們使用以下語法向這些歸類的元素應用樣式，即類名前有一個點號（.）
CSS文檔:
.important { color:blue }
2.4 多類選擇器
我們處理了 class 值中包含一個詞的情況。在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記爲重要（important）和警告（warning），就可以寫作：
HTML文檔:
<body>
<p class="important warning">
我是p標籤,正在被多類選擇器選擇
</p>
</body>
語法
然後我們使用以下語法向元素應用樣式，即類名前有一個點號（.）
CSS文檔:
.important.warning {color:blue}
2.5 ID選擇器
ID 選擇器允許以一種獨立於文檔元素的方式來指定樣式。
在某些方面，ID 選擇器類似於類選擇器，不過也有一些重要差別。
HTML文檔
<body>
<p id="intro">
我是p標籤,正在被ID選擇器選擇.
</p>
</body>
語法
ID 選擇器前面有一個 # 號 - 也稱爲棋盤號或井號
CSS文檔
#intro {color:blue}
2.6 屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素
如果希望選擇有某個屬性的元素，而不論屬性值是什麼，可以使用簡單屬性選擇器。
HTML 文檔
<body>
<a href="https://blog.csdn.net/qq_36090463/article/list/1?">可以應用樣式：</a>
<hr />
<a name="CSDN搜索阿武剛巴得">無法應用樣式：</a>
</body>
CSS文檔
a[href] {color:red;}
2.7 後代選擇器（descendant selector）又稱爲包含選擇器
我們可以定義後代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。
舉例來說，如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：
HTML文檔
<body>
<h1>
這是h1標籤, <em>important</em> 被後代選擇器選擇.
</h1>
<p>
這是p標籤 <em>important</em> 被後代選擇器選擇.
</p>
</body>
CSS文檔
h1 em {color:red;}
三.CSS選擇器分組
通過分組，創作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。
假設希望 h2 元素和段落都有灰色。爲達到這個目的，最容易的做法是使用以下聲明：
HTML文檔
<body>
<h2>我是h2標籤,目前被選中分組</h2>
<p>我是p標籤,目前被選中分組</p>
</body>
將 h2 和 p 選擇器放在規則左邊，然後用逗號分隔，就定義了一個規則。其右邊的樣式（color:gray;）將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那麼規則的含義將完全不同。參見後代選擇器。可以將任意多個選擇器分組在一起，對此沒有任何限制。
CSS文檔
h2, p {color:gray;}
至此分享完畢,覺得有幫助的話請給個贊吧!(*￣︶￣)