CSS 3基础 （一）

一、设置不同行的相同属性（奇数行、偶数行等）

1、selector：nth - child（n）：匹配组合selector，并且是其父级元素的第n个元素（n可以是odd、even、数字等）

2、selector：first - child：匹配符合selector，并且是父级元素的第一个元素（儿子）

3、selector：last - child：匹配符合selector，并且是父级元素的最后一个元素（儿子）

4、selector：nth - last - child：匹配组合selector，并且是其父级元素的倒数第n个元素（n可以是odd、even、数字）

5、selector：first - of - type：匹配符合selector，并且是它同类型、同级的兄弟元素的第一个子元素

6、selector：Empty：匹配符合selector，并且内部没有任何子元素的元素

7、selector：before：设置selector之前的内容

8、selector：after ： 设置selector之后的内容

二、子选择器与兄弟选择器

1、子选择器：

      selector 1 > selector 2 { ...... }

例：

.parent > .son {
       background-color:blue;
}
//设置父亲的儿子的背景色为蓝色，不会影响到孙子

2、兄弟选择器：

      selector 1 ~ selector 2 { ....... }

例：

.abc ~ div {
      background-color:green;
}

<div class="abc"></div>
<div></div>
//把abc之后的所有兄弟背景色变为绿色

三、《 》号：quotes属性的使用

<span style="font-size:18px;">selector1 > selector2 {
       quotes : "<<"  ">>";
}

 selector1 > selector2 : before {
       content : open-quotes;
}

 selector1 > selector2 : after {
       content : close-quotes;
}</span>

四、计数器——排名

<span style="font-size:18px;">selector 1 > selector 2 {
    counter - increment ： mycounter；
}

selector 1 > selector 2 : before {
    counter："No." counter(mycounter) ":"；
}</span>