html - <span> 中的文本未从类继承样式

Question

我想知道是否有人可以帮助我或指出正确的方向，以便我可以解决我的问题。

我有一个已分配类(class)的列表

<ul class="link-list nav">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

链接列表导航如下所示:

.link-list {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.link-list > li {
    display: inline-block;
}
.link-list > li > a {
    display: block;
    padding: .9em 1.6em;
    /*margin: top right bottom left;
    border: 1px solid white;*/
    text-decoration: none;
    color: white;
}
.link-list > li > a:hover { /* :hover, :focus, :blur */
    color: pink;
}

.link-list.nav > li > a {
    font-weight: bold;
}

所以现在列表正在按应有的格式进行格式化

正确的颜色:

但是当我试图通过嵌入 span 标签并将上面的代码更改为:

<ul class="link-list nav">
  <li><span style="font-size: large"><a href="#">Menu 1</a></span></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>

字体变大，但所有其他格式都消失了

不正确的颜色:

我一直在尝试定义另一个继承自链接列表导航但未成功的类。有什么建议吗？

提前致谢， 问候汤姆。

Answer 1

• 您可以根据您的 CSS 将 span 作为 a 的子级(您使用的是直接子级选择器 >)。

或

• 你可以在 li 中使用 CSS 选择器 first-child

或

• 或者简单地删除 >，使其成为一个 child (不是直接的)。

.link-list {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.link-list > li {
  display: inline-block;
}
.link-list > li > a {
  display: block;
  padding: .9em 1.6em;
  /*margin: top right bottom left;
    border: 1px solid white;*/
  text-decoration: none;
  color: red;
}
.link-list > li > a:hover {
  /* :hover, :focus, :blur */
  color: pink;
}
.link-list.nav > li > a {
  font-weight: 700;
}
/* use this */

.link-list.nav > li > a span {
  font-size: 20px
}
/* or use this */

.link-list.nav > li:first-child > a {
  color: blue
}

<ul class="link-list nav">
  <li><a href="#"><span>Menu 1</span></a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
  </li>
  <li><a href="#">Menu 4</a>
  </li>
</ul>