css 伪类控制同级 |css页面左右动

/*选中同级中第一个 p 标签*/
p:first-of-type {
font-weight: bold;
}
/*选中同级中最后一个 p 标签*/
p:last-of-type {
font-style: italic;
}
/*选中同级中偶数顺序的 p 标签*/
p:nth-of-type(even) {
color: blue;
}
/*选中同级中第 3 个 p 标签*/
p:nth-of-type(3) {
text-decoration: underline;
}
/*选中鼠标悬浮在 p 标签上时，改变其背景色*/
p:hover {
background-color: lightblue;
}

使用同级伪类可以使你更方便的控制 HTML 元素中的样式，通过上述代码的演示可以看出，同级伪类可以很轻松地选中并修改同级元素的样式，同时使用伪类也能使 CSS 与 HTML 的关系更加紧密、可控。