css选择器之随遇而安

选择器这一部分确实蛮重要，从css布局到jq的使用，很多细节问题决定了你工作的速度，但是啦，掌握起来又很枯燥，一堆符号，你的兄弟，我的父亲，什么祖先，上一级祖先，因此跟背单词一样，需要多加练习，并且多运用

(1)nth-chlid(n)与nth-of-type(n)

乍看上去，真的是傻傻分不清楚，但也能隐约猜到一些什么，就是后面的是跟type有关的

<style>
/*p:nth-child(2){
    color: deeppink;
}*/
p:nth-of-type(2){
    color: deepskyblue;
}
</style>

</head>
<body>
<div class="box">
    <p>我能单杀</p>
    <p>她喜欢我</p>
    <p>蛮王没大招</p>
</div>

捕11111获.PNG

这两个选择器在父级只有单一对应子元素时，效果是一样的

当在box里面加了一个div，效果就发生变化了

<style>
p:nth-of-type(2){
    color: deepskyblue;
}
</style>

</head>
<body>
<div class="box">
    <div class="first-son">上单盖伦大保健</div>
    <p>我能单杀</p>
    <p>她喜欢我</p>
    <p>蛮王没大招</p>
</div>

捕2222222获.PNG

这里是直接跳过了div，从p标签开始计算

而nth-child(n)则出现了不同

<style>
p:nth-child(2){
    color: deepskyblue;
}
</style>

</head>
<body>
<div class="box">
    <div class="first-son">上单盖伦大保健</div>
    <p>我能单杀</p>
    <p>她喜欢我</p>
    <p>蛮王没大招</p>
</div>

捕3333获.PNG

归纳：对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：

1这是个段落元素
2这是父标签的第二个孩子元素

对于:nth-of-type选择器，意味着选择一个元素如果：

1选择父标签的第二个段落子元素

表格隔行变色

<style>
tr:nth-of-type(odd){
    background-color: #BAB5B9;
}
/*odd 古怪的，奇数的*/
tr:nth-of-type(even){
    background-color: #fff;
}
</style>

</head>
<body>
<table>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
    <tr>
        <td>保罗</td>
        <td>格里芬</td>
        <td>乔丹</td>
    </tr>
</table>

捕5555获.PNG

（2）css3新增选择器

nth-child()
first-child
*last-child
nth-of-type()