Question

我无法找出适当的CSS选择器来定位只更改一个列表项的字体。这是布局

<ul id="menu-applemain class="x-nav>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

我实际上可以通过选择正确的列表项 #menu-applemain li:nth-child(4){ }即使使用！important，我也可以更改背景颜色而不是字体。我非常确定我需要定位li a才能更改字体。我只是不确定选择器。我已经尝试#menu-applemain li a:nth-child(4){ }，但这不起作用。

Answer 1

试图关闭引号？

#menu-applemain li:nth-child(4) {
  font-size: 200%;
  font-family: impact, sans-serif;
}

<ul id="menu-applemain" class="x-nav">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

如果你想要链接：

#menu-applemain li:nth-child(4) a {
  font-size: 200%;
  font-family: impact, sans-serif;
}

<ul id="menu-applemain" class="x-nav">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

Answer 2

您可以使用多种方法来定位代码中的正确li。

1.您可以使用以下代码按其位置定位：

#menu-applemain > li:nth-child(HERE_YOU_PUT_THE_ORDER_OF_THE_ELEMENT) {
   font-family: verdana,sans-serif;
}

你可以在这里阅读更多关于如何在css中使用nth-child函数的内容： :nth-child

2.您可以像以下

一样给我一个ID

<li id="target-li">example</li>

然后

#menu-applemain > #target-li {
   font-family: verdana,sans-serif;
}

如何更改特定<li>的字体

2 个答案: