Question

我有一个无序列表，我用于导航。然后，我在主页中使用另一个无序列表，列出用于我摄影的设备列表。

当我仅设置顶部导航ul的样式时，它会开始设置设备的ul和li样式。下面的代码（尚未完成，但正在创建水平菜单）：

HTML

导航：

<nav id="page-navigation">
      <ul>
            <li><a href="index.html" title="Home">Home</a></li>
            <li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
                <ul>
                    <li><a href="_portfolio/photography.html" title="Photography">Photography</a></li>
                </ul>
      </ul>
</nav>

设备：

<h1>Equipment:</h1>
  <ul id="equipment">
      <li>Canon EOS 600D.</li>
      <li>Canon EF 100mm f/2.8 Macro USM Lens.</li>
      <li>Canon EF-S 18-55mm f/3.5-5.6 Lens.</li>
      <li>Adobe Lightroom CC.</li>
  </ul>

CSS

导航：

#page-navigation ul, li
{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

设备：

#equipment li, ul
{
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.3em;
    margin-top: 0.1em;
    margin-bottom: 0.5em;
}

无论我在导航中的风格如何，它都会进入设备，反之亦然。我认为拥有一个id的想法意味着它只会设置该ID，而不是它找到的每个li或ul。

Answer 1

此：

#page-navigation ul, li {}

应该读作：

#page-navigation ul, 
li {
}

您要求在页面上ul以及任意 #page-navigation下任意 li。< / p>

如果您想将自己限制在li下的#page-navigation代码，您可以说：

#page-navigation ul, 
#page-navigation li {
}

如果您只希望对每个 top 级别进行样式设置，请说明：

#page-navigation > ul, 
#page-navigation > ul > li {
}

Answer 2

您需要了解逗号在选择器中的功能。它将元素分隔为选择，因此public class Books { public Books() { CommentsList = new List<Comments>(); } public Books() { RatingList = new List<Rating>(); } public virtual int Id { get; set; } public virtual string Title { get; set; } public virtual string Category { get; set; } public virtual string ISBN { get; set; } public virtual string Description { get; set; } public virtual string Image { get; set; } // public virtual int CategoryId { get; set; } public virtual Categories Categories { get; set; } public virtual IList<Comments> CommentsList { get; set; } public virtual IList<Rating> RatingList { get; set; } public virtual void AddComment(Comments comm) { comm.Books = this; CommentsList.Add(comm); } public virtual void AddRating(Rating rating) { rating.Books = this; RatingList.Add(rating); } }表示将以下规则应用于任何#page-navigation ul, li元素，该元素是ID为ul的元素的descandant，并将它们应用于所有{{} 1}}页面上的元素。

#page-navigation选择器也是如此。也就是说，将以下规则应用于作为元素后代的所有li元素，其中ID为#equipment li, ul和页面上的所有li元素。

您可能想要的是#equipment和ul。

Answer 3

我现在正在使用手机，但你的选择器是错误的。 '#page-navigation ul，li'选择页面导航 - ＆gt; ul AND每个Li标签。只需删除逗号就可以了。

Answer 4

如果要在列表中设置第一个li的样式，请写：

#page-navigation > li {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}

对于第二个李：

#page-navigation li > li {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}

设置ul：

的样式

#page-navigation ul {
   font-weight: 400;
   font-size: 1.1em;
   line-height: 1.3em;
   margin-top: 0.1em;
   margin-bottom: 0.5em;
}

如何设置多个无序列表中的一个？

4 个答案: