Question

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

我有一个已分配课程的列表

<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

您可以将span作为a的孩子给予您的CSS（您使用的是直接子选择器>）。

或

您可以在first-child

li

或

或只是移除>，使其成为孩子（不是直接的孩子）。

.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>

Answer 2

选择器不再匹配，因为<a>不再是<li>的孩子。

使用descendant combinator（空格）代替child combinator（>）。

或者，将跨度放在最里面的元素中，这样它就不会破坏子组合子。

或者，也许是最好的选择，不要添加额外的元素。您希望在那里设置所有文本的样式，因此将CSS应用于整个元素。

Answer 3

感谢Quentin和dippas的快速反应。

在这两个解决方案中，我都去创作：

.link-list.nav > li > a span {
  font-size: 20px
}

并改变

<li><span><a href="#">Menu 1</a></span>

到

<li><a href="#"><span>Menu 1</span></a>

这完全解决了我的问题。显然，我需要接触有关继承的文章。

再次感谢并照顾好人！

<span>中的文本不是从类继承样式

3 个答案: