① element > element 选择器

用于选择指定父元素的元素

  • 实例 
选择所有父级是 <div> 元素的 <p> 元素：

div>p
{
   
background-color:yellow;
}

与 element element 选择器的区别：

div p {} 是选择div 下所有的p元素；
div > p {} 是选择父元素为div 的所有p 元素
如下实例

<style> 
  div span{
   color:red;}
</style>

<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>
上面的例子中所有的span都为红色

而下面的：只有第二个span 为红色

<style> 
  div>span{
   color:red;}
</style>

<div>
  <p> 
     <span> Hello World! </span>
  </p>
  <span> Study Css </span>
</div>
② only-child 选择器

匹配是父元素唯一子元素的元素

<style> 
p:only-child
{
   
background:#ff0000;
}
</style>
<body>

<div><p>This is a paragraph.</p></div>

<div><span>This is a span.</span><p>This is a paragraph.</p></div>

</body>

③ nth-child 选择器

匹配为父元素的第n个子元素的元素

<style> 
p:nth-child(2)
{
   
	background:#ff0000;
}
p:nth-child(3)
{
   
	background: blue;
}
p:nth-child(4)
{
   
	background: green;
}
</style>
<body>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

</body>