如何使用XML与CSS为表格首行添加背景色？

需要给XML通过CSS渲染成的表格的第一行添加背景色，作业要求必须使用XML，现有实现代码如下，希望通过调整CSS完成需求。

现有CSS代码：

website {
  display: table;
  width: 80%;
  border-collapse: collapse;
  margin-top: 20px; 
  margin-left: 20px; 
}

menu {
  display: table-row;
}

menu > * {
  display: table-cell;
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

menu > page {
  font-weight: none;
}

menu > url {
  text-align: center;
}

现有XML代码：

<website>
  <menu>
   <page>Page Name</page>
   <url>URL</url>
  </menu>
  <menu>
    <page>Home</page>
    <url>index.html</url>
  </menu>
  <menu>
    <page>Products</page>
    <url>products.html</url>
  </menu>
  <menu>
    <page>About</page>
    <url>about.html</url>
  </menu>
  <menu>
    <page>Contact</page>
    <url>contact.html</url>
  </menu>
</website>

解决方案 #

利用CSS的:first-child伪类选择器，选中website下的第一个menu元素（即表格首行），为其添加背景色即可。修改后的CSS代码如下：

website {
  display: table;
  width: 80%;
  border-collapse: collapse;
  margin-top: 20px; 
  margin-left: 20px; 
}

menu {
  display: table-row;
}

/* 为表格首行设置背景色 */
menu:first-child {
  background-color: #e8f4f8; /* 颜色值可根据需求自行调整 */
}

menu > * {
  display: table-cell;
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

menu > page {
  font-weight: none;
}

menu > url {
  text-align: center;
}

:first-child伪类会精准匹配父元素下的第一个子元素，这里就是对应表格的表头行，设置background-color就能实现首行上色的效果。

内容的提问来源于stack exchange，提问作者小畑優貴