css选择器

1、元素选择器：
p {color:gray;} h2 {color:silver;}

2、选择器分组，同时选择：
h1, h2, h3, h4, h5, h6 {color:blue;}
#yellow,#green,#blue{
border: 1px solid white;
width: 100px;
height: 100px;
display: none;
}

3、 类选择器
*.className {color:blue;} *匹配所有元素，*也可以省略。
.className {color:blue;} 匹配所有class为 className的元素。
元素选择器和类选择器（单类和多类）可以结合在一起，p.className {color:blue;} 匹配class为className的 p 元素。
多类选择器 .important.warning {background:silver;} class中包含 important 和 warning
html元素class包含一个词列表：

This paragraph is a very important warning.

4.、ID选择器
#IdName{color:blue;} 不同于class，ID在页面中是唯一的，不能重复。所以也没必要和元素选择器结合了。

5、属性选择器
[title] {color:blue;}
匹配元素有属性 title 的所有元素。*可以省略，[title] 也是匹配有属性title的所有元素。
属性选择器和元素选择器可以结合使用 ：
h1[title]{color:blue;} 匹配 元素中有title 属性的h1元素。
多属性的属性选择器： a[href][title] {color:red;}
属性值匹配的属性选择器： a[title=“hello”]{color:red;} = 是属性值完全匹配，~= 是部分匹配 |= ^= $= *=

6、后代选择器
h1 em {color:red;} 选择 h1 元素的后代元素 em（h1中所包含的所有em元素）。

7、子元素选择器
只选择某个元素的子元素，而不是任意后代元素。
h1 > strong {color:red;} 选择h1下面，直接子元素 strong
复杂例子： table.company td > p 选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元 素有一个包含 company 的 class 属性。相当于类选择器，元素选择器 ，后代选择器 ，子选择器的结合。

8、 相邻兄弟选择器
选择紧接在另一个元素后的元素，而且二者有相同的父元素。
h1 + p {color:red;} 选择 h1 后面相邻的兄弟元素 p

9、 CSS伪类
伪类用于向某些选择器添加特殊的效果，
伪类的语法 selector:pseudo-class {property: value;}
p:first-child 1.先找到p的父类，2.再找到这个父类的第一个元素，3.是不是p，如果是p就应用css。
p > i:first-child p元素中第一个元素 , 这个和 p > i是不一样的， p>i会选择 p元素中所有子 i，first-child只会选择第一个（长子）！
p:first-child i 第一个p元素下的所有 i元素

10.、## 标题CSS伪元素
p:first-line p元素中的第一行文本
:after :before 可以再元素的后面和前面插入内容。