Question

这可能是一个愚蠢的问题，但我是新手，所以不要太残忍！（哈）好的，我在网络设计课上，我们正在完成一项任务。我的网页上有三个导航栏，它们都有一个id名称。 topnav，mainnav和footernav。他们都必须看起来不同。我如何单独定位它们？我已经尝试过#topnav {无论我添加什么规则;}但这没有任何作用。我已经尝试过.topnav {无论规则;}并且也没有做任何事情。我无法理解，我即将翻出来！请帮帮我。谢谢！！这就是它的样子：

<ul id="topnav"> 
  <li><a href="#">Home</a></li>
  <li><a href="#">Sitemap</a></li>
  <li><a href="#">Contact</a></li>
</ul>

这会在我的网页中产生一个小小的导航栏，我必须将文本置于按钮背景中，取出下划线，使文本变为粗体，12px和绿色，并且必须有红色悬停。我几乎得到了它......它是绿色的，红色的悬停，我无法弄清楚如何将它居中或者用css瞄准那个特定的导航栏。我尝试的一切都没有做任何事情或全部针对它们（所有的导航栏）当我把规则放在CSS中时，这就是我所拥有的：

a:link {
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: #4B5125;
  display: inline-block;
}

我知道一个：链接目标他们所有，但我想告诉css它需要修改这些链接，但只有这些链接，而不是页面上的所有导航栏。这也不是文本的中心......这个东西很难！

Answer 1

使用CSS，您需要首先了解的是，某些元素不会自动从祖先那里继承某些属性。默认情况下，<a>元素特别不会继承color和text-decoration（但如果您应用规则color: inherit;和text-decoration: inherit;，则可以这样做：< / p>

＆＃13;

#topnav {
  font-size: 12px;
  font-weight: bold;
}
#topnav li {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  color: limegreen;
  text-decoration: none;
}
#topnav li a {
  color: inherit;
  text-decoration: inherit;
}

＆＃13;

<ul id="topnav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

＆＃13;

JS Fiddle demo

还有以下内容，请注意，在此实例中，color和text-decoration规则已移至祖先#topnav元素（来自<li>，与之前一样demo）：inherit;`他们可以这样做：

＆＃13;

#topnav {
  font-size: 12px;
  font-weight: bold;
  color: limegreen;
  text-decoration: none;
}
#topnav li {
  text-align: center;
  display: inline-block;
  list-style-type: none;
}
#topnav li a {
  color: inherit;
  text-decoration: inherit;
}

＆＃13;

<ul id="topnav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

＆＃13;

JS Fiddle demo

这允许您确保所有后代（包括<a>元素）将实现与指定这些样式的最近祖先元素上设置的样式相同的样式。显然，虽然针对后代的更具体的选择器会覆盖针对祖先的不太具体的选择器。

但是，由于您在color元素上设置了这些属性 - text-decoration和<a> - 因此定义特定颜色和文本修饰可能更有意义<a>元素本身 - 除非您特别希望以常见方式设置多个后代。

如果它只是您要定位的<a>元素，那么以下内容将实现：

＆＃13;

#topnav {
  font-size: 12px;
  font-weight: bold;
}
#topnav li {
  text-align: center;
  display: inline-block;
  list-style-type: none;
}
#topnav li a {
  color: inherit;
  text-decoration: inherit;
}

＆＃13;

<ul id="topnav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

＆＃13;

JS Fiddle demo

现在，在您对问题的评论中，您解释说：

我试图将文字居中，取出下划线，使它们大胆，12px。和绿色。然而，css认为我正在谈论网页上的所有链接并将这些规则应用于所有链接。我想用id＆＃34; topnav＆＃34;编辑导航栏。出于某种原因，即使我认为＃是一个id选择器，＃topnav也什么都不做。

你对文本居中有点模糊;可以解释为在页面中居中＆＃39;或者以<li>元素为中心;上面我假设你希望它们在页面中居中。

要将文字置于页面中心，首先使用#topnav规则设置text-align: center元素的样式;这会对齐该元素中的任何内联 - 和内联块 - 元素;为了进一步说明我们将<li>元素显示为display: inline-block，这显然会使它们显示为内联块，因此以上述规则为中心。

我选择相信您希望#topnav的所有文字都是12px和bold，因此这些样式会应用于#topnav element（<a>元素通常会继承这些属性。）

我认为很清楚地看到#topnav确实做了一些事情（而不是＆＃34; 没有＆＃34;）但也许你是依赖继承不正确。至于样式化<a>元素，它们对于设置这些元素的所有伪类（:link，:visited，:hover，{{1} }和:active）如果你想将相同的样式应用于所有状态;因此，所有州共享的共同属性应该在:focus的规则中，每个伪类/状态都是唯一的属性。 a个元素通常只放在那个或那些特定伪类的规则中。

典型的例子如下：

<a>

＆＃13;

/* the common properties of all <a> elements, and those
   that match only the ':link' pseudo-class: */
a,
a:link {
    cursor: pointer;
    text-decoration: none;
    font-size: 1.4em;
}
/* properties for the ':hover' state:
a:hover {
    text-decoration: underline;
    color: #f90;
    box-shadow: 0 0 4px #f90;
}
/* properties for the ':active' and ':focus' state: */
a:active,
a:focus {
    color: #f00;
    box-shadow: 0 0 4px #f00;
}

＆＃13;

/* the common properties of all <a> elements, and those
that match only the ':link' pseudo-class: */
a,
a:link {
  cursor: pointer;
  text-decoration: none;
  font-size: 1.4em;
}

/* properties for the ':hover' state: */
a:hover {
  text-decoration: underline;
  color: #f90;
  box-shadow: 0 0 4px #f90;
}

/* properties for the ':active' and ':focus' state: */
a:active,
a:focus {
  color: #f00;
  box-shadow: 0 0 4px #f00;
}

＆＃13;

现在，如果一个元素中有一些<a href="#">Link One</a> <a href="#">Link Two</a> <a href="#">Link Three</a>个元素，并且该元素之外有相同的元素，则需要调整选择器以仅定位特定元素中的那些元素，其中{{1元素;所以对于简单的HTML，如下所示：

<a>

我们可以使用#topnav之类的选择器来定位所有<div id="topnav"> <a href="#">Home</a> <a href="#">About</a> </div> <div id="sidenav"> <a href="#">Home</a> <a href="#">About</a> </div> <a href="#">Other links 1</a> <a href="#">Other links 2</a>元素，或者我们可以使用包含祖先元素类型的选择器来仅定位其中的a { /* css */}元素<a>会导致：<a>（或<div>），在这种情况下，div a也可以说明具体div > a { {1}}我们希望设计样式的后代：id：

<div>

＆＃13;

<a>

＆＃13;

#topnav a

＆＃13;

参考文献：

CSS Selectors Level 3。

Answer 2

您需要使用#topnav仅在descendant/child selector内定位链接，即在CSS选择器中设置父元素和子元素之间的空格。 Learn more about CSS Selectors

如果您需要将链接置于中心位置，请为ul提供固定宽度，并设置auto页边距left和right。中心现在太简单了。稍后您将学习更多现代概念，如flexbox。

#topnav {
  width: 100px;
  margin: 0 auto; /* Short hand for margin-left: auto; margin-right: auto; */
}
#topnav a:link { /* Access all the anchors inside ul#topnav using child selector */
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: #4B5125;
  display: inline-block;
}

<ul id="topnav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

<ul id="middlenav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

<ul id="bottomnav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Sitemap</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

如何定位具有ID的特定导航栏？

2 个答案: