字体系列的css属性继承没有按我预期的方式工作答案

【问题标题】：css properties inheritance for font-family not working the way I expected字体系列的css属性继承没有按我预期的方式工作
【发布时间】：2018-03-05 04:40:27
【问题描述】：

我有一个网页，我正在尝试添加一个链接列表，以便它们看起来像标签。这适用于所有主页，但我要添加的新链接列表位于不同的部分。

工作清单在

 <body class="shadowbox">
  <div class="full">
   <div class="banner">
    <div class="tab-header">

使用几个子 div 来创建各种选项卡和填充物。

检查元素表明它正在从“横幅”获取字体系列。即使我将字体系列放在“tab-header”中，它仍然来自“banner”

新列表在页面的另一部分

<body class="shadowbox">
 <div class="full">
  <div class="main">
   <div class="centre">
    <div class="about shadowbox">
     <div class="tab-header">

使用几个子 div 来创建各种选项卡和填充物。

检查元素表明它正在从“main a”获取字体系列。同样，将 font-family 放在“tab-header”或其他任何地方都不会改变这一点。

由于字体系列仅用于链接文本，我尝试创建一个“tab-header a”css 定义。这取代了第一组选项卡中的“横幅”定义，但第二组仍然来自“main a”。

相关的css部分是：

.main a {
  font-family: serif;
  color: rgb(36,64,143);
  padding-left:  5px;
  padding-right: 5px;
}

.tab-header a {
  font-family: sans-serif;
}

我可以通过在链接本身中设置样式来获得正确的字体系列。我不能通过为链接分配一个类来做到这一点（即

<a style="font-family: sans-serif" ...

有效但

<a class="tab-link" ...

没有）。

这发生在 Firefox 和 Chromium 中，所以我对 css 工作原理的理解肯定有问题。我原以为嵌套更深的 css 值会取代更全局的值。

有人能解释一下吗？

【问题讨论】：

标签： fonts css

【解决方案1】：

您写道这不起作用：<a class="tab-link" 但是您定义的 CSS 规则是针对 .tab-header a

首先-除了这两个具有完全不同的名称-您的CSS选择器.tab-header a不是一个类，而是一个类和一个标签的组合，标签元素是一个孩子（或后代）具有该类的元素。

所以你必须定义一个类，比如.my_tabheader1（不是.my_tabheader1 a {..}），并将其应用到你的a标签：<a class="my_tabheader1" ... >...

【讨论】：