错题本系列-CSDN博客

本文链接：https://blog.csdn.net/m0_73814612/article/details/133944896

博客围绕HTML和CSS展开，提出设置color属性字体颜色未改变、设置height=line-height文字无法垂直居中两个问题。经分析，前者是因css直接样式比祖先样式优先级高，后者是font默认含line-height属性。还总结了样式优先级及font使用注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

涉及知识与问题：

HTML CSS

问题1：设置color属性后，字体颜色未改变

问题2：设置height=line-height后，文字无法垂直居中

问题描述及解决：

HTML代码

<div class="tobar">

<div class="container">

<ul class="list clearfix">

<li><a href="#">首页</a></li>

<li><a href="#">学校概况</a></li>

<li><a href="#">学院与学科</a></li>

<li><a href="#">职能部门</a></li>

<li><a href="#">人才培养</a></li>

<li><a href="#">科学研究</a></li>

<li><a href="#">招生就业</a></li>

<li><a href="#">管理与服务</a></li>

<li><a href="#">人才招聘</a></li>

</ul>

</div>

CSS代码

.container{

width: 57.125rem;

margin: 0 auto;

}

/* #region顶部导航条开始 */

.tobar{

height: 5.3125rem;

background-color: blue;

line-height: 5.3125rem;

}

.container .list li{

float: left;

color: white;

font: 1.5rem 楷体;

}