在该实例中对ul项目列表进行样式的指定,分别使用first-child选择器与last-child选择器对第一个列表项目和最后一个项目列表分别指定不同的背景颜色。
实现图示的CSS代码:
li:first-child { background:#0457b5;color:#fff; } li:last-child { background:#75b504; color:#fff; }
实现图示效果的HTML代码:
<ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> <li>项目列表4</li> </ul>
使用first-child选择器将第一个项目列表背景变为蓝色、字体颜色变为白色,使用last-child选择器将最后一个背景变为绿色、字体颜色变为白色。