body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #f4f7f9;
    margin: 0;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}



/* 
   - 为 .details-list 容器设置 300px 宽度和边框
   - 为容器内的 li 元素设置 20px 内边距 */
.details-list {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 8px;
    /* 轻微的圆角，让它更好看 */
    overflow: hidden;
    /* 配合圆角，确保内部元素的背景不会溢出 */
    background-color: white;
}

.details-list li {
    padding: 20px;
}

/* 
   - 使用相邻兄弟选择器 (+) 为非首个 li 添加上边框 */
.details-list li+li {
    border-top: 1px solid #e00909
}




/* - 使用 :hover 伪类，当鼠标悬停在 li 上时改变背景色 */
*/ .details-list li:hover {
    background-color: #ecb2df;
}


/* - 使用属性选择器 ([...]) 选中 data-alert="high" 的 li，并改变文字颜色 */
*/ .details-list li[data-alert="high"] {
    color: red;
}



.details-list li p:nth-child(2) {
    font-weight: bold;
    margin: 0;
    /* 清除 p 标签默认的 margin，让布局更紧凑 */
}


span.unit {
    color: #6e4fcd;
    font-size: 14px;
}

.details-list li p:first-child {
    margin: 0 0 5px 0;
    /*上右下左*/
    color: #53d1ed;
}