Question

在此处完成HTML / CSS新手。当我编辑HTML并尝试更改特定列表以显示为inline时出现了这个问题，但又不想影响页面上的所有其他列表。

我创建了一个类来分隔相关列表，HTML / CSS如下：

li.shortcut {
  display: inline;
  margin-right: 10px;
}

<p>To navigate faster click on these shortcuts.</p>
    <ul>
      <li class="shortcut"><a href="#header1">Shortcut 1</a></li>
      <li class="shortcut"><a href="#header2">Shortcut 2</a></li>
      <li class="shortcut"><a href="#header3">Shortcut 3</a></li>
      <li class="shortcut"><a href="#header4">Shortcut 4</a></li>
      <li class="shortcut"><a href="#header5">Shortcut 5</a></li>
    </ul>

是否有更有效的方法来实现同一目标？我正在关注一本书，但是它正在逐渐过时，所以我想知道如果目前还没有的话，目前写这本书的标准方式是什么。

Answer 1

要对孩子进行特定更改时，请在父级上考虑id或class。

 ul.menu li { display:inline; ... }

和

<ul class=menu><li>...</li>...</ul>

Answer 2

尝试像这样使用CSS :nth-child() Selector

li.shortcut:nth-child(2) {
  display: inline;
  margin-right: 10px;
  background-color:green;
}

<p>To navigate faster click on these shortcuts.</p>
    <ul>
      <li class="shortcut"><a href="#header1">Shortcut 1</a></li>
      <li class="shortcut"><a href="#header2">Shortcut 2</a></li>
      <li class="shortcut"><a href="#header3">Shortcut 3</a></li>
      <li class="shortcut"><a href="#header4">Shortcut 4</a></li>
      <li class="shortcut"><a href="#header5">Shortcut 5</a></li>
    </ul>

或使用您希望的另一种方式source

将CSS应用于列表而不更改页面上的每个列表的最有效方法是什么？

2 个答案: