[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;}
~~~
