伪类的分类
1.状态伪类
状态伪类
2.结构性伪类
关键字
:first-child 选择元素的第一个子元素
:last-child 选择某个元素的最后一个子元素
:nth-child() 选择某个元素的一个或多个特定的子元素
:nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算
:first-of-type 选择一个上级元素下的一个同类子元素
示例
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
结构伪类器
</title>
<link rel="stylesheet" type="text/css" href="jiegouweilei.css"/>
</head>
<body>
<p> 测试2</p><br>
<p> 测试3</p><br>
<p> 测试4</p><br>
<p> 测试1</p><br>
<p> 测试1</p><br>
<table border="1" width="500" >
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</label>
</body>
</html>
p:first-child{
/* 父元素 第一个才会被选中 第一行标签必须是p */
background-color: #0000FF;
}
p:first-of-type{
/* body 里面 第一个p标签里面的背景 */
background-color: #FF0000;
}
p:last-child{
/* body 里面最后一行p标签下 设置属性 */
background-color: #0000FF;
}
p:nth-child(2){
/**
* body 里面p标签第2个背景设置颜色
*/
background-color: red;
}
tr:nth-child(2){
background-color: #FF0000;
}