[TOC]
## 1.派生選擇器
~~~
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：
li strong {
font-style: italic;
font-weight: normal;
}
~~~
## 2.類選擇器
~~~
/* .important {color:red;}所有類名相同的元素顯示為紅色文本 */
p.important {color:red;}//只有段落顯示為紅色文本：
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
~~~
## 3.id選擇器
>id選擇器只能在文檔中使用一次；不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。
~~~
下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red {color:red;}
#green {color:green;}
~~~
## 4.屬性選擇器
~~~
1.下面的例子為帶有 title 屬性的所有元素設置樣式：
[title]
{
color:red;
}
2.下面的例子為 title="W3School" 的所有元素設置樣式：
[title=W3School]
{
border:5px solid blue;
}
~~~
| 類型 | 描述 |
| --- | --- |
| [abc^="def"] | 選擇 abc 屬性值以 "def" 開頭的所有元素 |
| [abc$="def"] | 選擇 abc 屬性值以 "def" 結尾的所有元素 |
| [abc*="def"] | 選擇 abc 屬性值中包含子串 "def" 的所有元素 |
## 5.父元素下的子類選擇(該例以p元素為例，其他元素以此類推)
~~~
<div class="parent">
<p>hello world</p>
<p class="two">hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
~~~
## 1.選擇給第n個p元素添加css樣式的書寫方式為：
~~~
.parent>p:nth-child(n){/*輸入內容*/};
小tips：n從1開始，需要給第幾個p添加樣式就輸入幾
~~~
### 2.選擇給第一個p元素添加css樣式時書寫方式為：
~~~
p:first-child{/*輸入內容*/};
~~~
#### 2.1選擇除了第一個p元素以外的p元素添加css樣式的書寫方式為：
~~~
p:not(:first-child){/*輸入內容*/};
~~~
### 3.選擇給最后一個p元素添加css樣式的書寫方式為：
~~~
p:last-child{/*輸入內容*/};
~~~
### 4.選擇除了.two以外的p元素添加css樣式的書寫方式為：
~~~
.parent>p:not(.two){/*輸入內容*/};
本例中也可以直接這樣寫:/*p:not(.two){/*輸入內容*/};*/
~~~
### 5.選擇相鄰兄弟p+p
**請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。請看下面的選擇器：**
~~~
p + p {font-weight:bold;}
~~~
