CSS选择器

基本选择器

• 标签选择器
• id选择器
• 类选择器

复合选择器

• 后代选择器 --- 选择器1 选择器2{}
• 子代选择器 --- 选择器1>选择器2{}

/*
    li.list 选择的是li中class="list"的元素
*/

ul li.list{
    color: red;
}

伪类选择器

        注意顺序问题

        :link :visited :hover :active

结构伪类选择器

根据元素的结构关系查找元素

E:first-child  表示在一组兄弟元素中的第一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）

E:last-child  表示在一组兄弟元素中的最后一个元素（最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。）

E:nth-child(n) 选择第n个E元素(第一个元素n值为1)

• 偶数标签：2n                    关键字：even
• 奇数标签：2n-1、2n+1     关键字：odd
• 5的倍数：5n
• 找到第5个以后的标签：n+5
• 找到第5个以前的标签：-n+5

E:first-of-type 选择父元素内具有指定类型的第一个E元素

E:last-of-type 选择父元素内具有指定类型的最后一个E元素

E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素

【注意】

first-child、last-child、nth:child() 是从后往前匹配，如下代码示例：

<a href="#">
    <img src="" alt="">
    <i></i>
    <i></i>
</a>

其中：

a i:nth-child(1){
    color:red;
}

意思是 a 标签中第一个孩子的类型去匹配 i，由于a 标签中第一个孩子是 img，不匹配 i，所以该样式不会生效

【注意】

first-of-type、last-of-type、nth-of-type(n) 是从从前往后选择，如下代码示例：

<a href="#">
    <img src="" alt="">
    <i></i>
    <i></i>
</a>

其中：

a i:nth-of-type(1){
    color:red;
}

意思是选择 a 标签中的 i 标签，这个 i 标签 是第一个 i 标签

【注意】 

伪元素选择器

::before

::after

1. content属性必须要写，不想写内容可以为空 content：''；
2. 伪元素默认为行内元素。不可直接设置宽高。
3. 可以在css中设置伪元素的其他属性（其他元素所具有的属性）如：显示模式，宽高，浮动定位，颜色背景颜色，字体属性，字体大小等等。
4. 根据这些属性可以很方便的使用伪元素，并且可以减少html结构中的代码量。