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;
}