html - 如何在其他元素中设置链接样式

Question

我有这个结构

<nav>
  <ul id="nav" class="sf-menu sf-navbar sf-js-enabled sf-shadow">
  <li id="level1-home" class="current sfHover sf-breadcrumb">
     <a href="/Admin/Home/Index">
  ...

而且我想在<a>不影响站点中任何其他链接的情况下对标签进行样式设置。最好的方法是什么？

Answer 1

nav a { /*affect only links in the navbar */ }

Answer 2

按 ID 定位

在您提供的代码中，您的元素id上有一个“导航” 。ul这可用于指定您要定位的锚点的容器：

#nav a {
  color: orange;
}

这将影响具有“导航”a的元素内的所有元素（无论嵌套深度如何） 。id

按唯一路径定位

检查您的链接的父母的唯一性。落在一个nav元素内的链接，在一个元素内header可以是这样的样式：

header nav a {
  color: red;
}

nav包含在 a 中的链接footer可以这样处理：

footer nav a {
  color: green;
}

免责声明

、header和标签footer都是navHTML5 结构。要广泛支持旧版浏览器，请确保在使用这些标签时包含HTML5Shiv 。