CSS结构伪类选择器

CSS结构伪类选择器

首先定义几个标签

<a href="">a</a>
<h1></h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>

示例代码如下所示：

/* ul的第一个子元素 */
ul li:first-child{
  background : red;
}

/* ul的最后一个子元素 */
ul li:last-child{
  background : blue;
}

/* 选中p1，定位到父元素，选择当前第一个元素
   选择当前p元素的父级元素，选择父级元素的第一个，且必须是当前元素才生效
 */
p:nth-child(2){
  background : yellow;
}

/* 选中p元素下的第二个，类型 */
p:nth-of-type(1){
  background : green;
}

/* 鼠标移上去会变色 */
a:hover{
  background : black;
}