css中div p; div,p; div.p; div>p以及p:nth-child(n)分别指的是什么？有何区别？

其实这个很好理解滴~~

div p:只设置div标签下的p标签

 

例：<style>

　　div p{color:red};

　　</style>

<div>

<p>红色</p>

<table>默认的颜色</table>

</div>

 

div,p:设置所有的div和p标签

例：

<style>

　　div,p{color:red};

</style>

<div>

<p>红色</p>

红色

</div>

 

div .p:设置div标签下类名为“p”的标签

例：

<style>

　　div .p{color:green};

</style>

<div>

<p class="p">绿色</p>

<p>默认的颜色</p>

</div>

同理：.first .second:指的是设置类名为“first”标签下的类名为“second”的标签。

注意：div.p:设置类名为“p”的div标签。

 

div>p：设置div标签下直接子标签p(第一个p标签)

例：

<style>

　　div .p{color:green};

</style>

<div>

<p>绿色</p>

<p>默认的颜色</p>

</div>

p:nth-child(n)：选中p元素，且该p元素必须是某个父元素下的第n个子元素（n从1开始）

例：

<style>

　　p:nth-child(1);

</style>

<div>
    <span>div span中第一个段落。</span>
    <p>div 中第一个段落。</p>
    <p>div 中的最后一个段落。</p>
</div><br>

<div style="border:1px solid">
    <p>另一个 div 中第一个段落。</p>
    <p>另一个 div 中的最后一个段落。</p>
</div>

只会选中第二个div中第一个子元素p;

不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素。