0

我读了一篇带有一些css文件的文章

#mainNav #toTop a {
    float: right;
    margin: 0 8px 0 0;
    font-size: 40px;
}

有人可以解释为什么他们#在一个 css id 类型中有两个东西吗？我该如何使用它？

先感谢您

4

5 回答 5

3

我不知道您所说的“CSS id 类型”是什么意思。所以我只是一般地解释一下 CSS，我们会看看这个代码段的作用是否变得清晰。

在 CSS 中，您有选择器和属性块。您的问题是关于选择器的：

#mainNav #toTop a

选择器用于定位（以及在某些其他平台上查询）HTML（有时是 XML）元素。此特定规则使用三个简单的选择器——两个 id 选择器和一个标签名称选择器——与两个后代组合器放在一起。

这意味着选择器将定位（并且伴随它的规则块将影响）任何锚元素（<a>），该元素是任何元素的后代，而该元素id=toTop又是任何元素的后代id=mainNav。

由于 id 元素应该是唯一的，因此将其中两个元素放在一个选择器中似乎很愚蠢。如果你愿意，你可以这样做，有时你需要这样做：我们还没有谈到选择器的特异性。

特异性定义了哪些规则优先于其他规则。例如，如果两个元素似乎都针对同一个元素：

form .label { color: blue; }
#contact-us .label { color: green; }
/* what color is the label? */

...那么哪个规则优先？为了弄清楚这一点，我们计算了特异性。我不会解释数学。

因此，假设您的项目中有一个无法更改的 CSS 样式表 - 它来自 3rd 方供应商之类的，它看起来像这样：

#toTop a { /*...*/ }

如果您需要更改受该规则影响的元素的样式，您会怎么做？

您可以（并且可能会）定义一个更具体的新规则。一种方法是在规则中添加另一个 id 选择器：

#mainNav #toTop a { /*...*/ }

但实际上，您可以轻松添加任何其他选择器：

div#toTop a { /*...*/ }

实际上，是否有必要取决于您要执行的操作、与之交互的其他规则以及您正在处理的 HTML 类型。

这里还有一点需要考虑：CSS 样式表是用来重复使用的。如果该元素在文档中的不同位置应该表现不同怎么办？如果id="toTop"有时id="mainNav"在某些页面的元素内部，而在其他页面的不同位置（比如说在id="footer"元素中）怎么办？如果它根据客户端 JavaScript 移动会怎样？然后你可能想像这样定义 CSS：

#mainNav #toTop a { /*...*/ }
#footer #toTop a { /*...*/ }

... 最终，为什么开发人员会选择这样做实际上取决于他们正在使用的 CSS、JavaScript 和 HTML。这绝对是不寻常的，但这不是不必要的，也不是不好的做法。

于 2013-03-13T16:44:49.550 回答
1

ID 必须始终是唯一的。但是，使用多个 id 来使样式更具体是有效的。

在您的示例中，您正在 #mainNav 中查找 ID 为 #toTop 的元素。

于 2013-03-13T16:38:08.833 回答
1

这是一个完全有效的 CSS 规则。这是非常具体的。这种使用的动机可能与页面布局的设计方式和/或 JavaScript 处理程序如何与 DOM 交互有关。

于 2013-03-13T16:38:33.567 回答
1

这是一个糟糕的 CSS 示例。您示例中的选择器层次结构是多余且不必要的。它说选择a作为 ID 为的元素的后代的所有元素，该元素是 ID 为toTop的元素的后代mainNav。所以它假设一个基本的结构是这样的：

<div id="mainNav">
    <div id="toTop">
        <a href="#">link</a>
    </div>
</div>

但是，由于ID 必须是唯一的，因此针对相同的元素只需要这样做：

#toTop a
于 2013-03-13T16:40:06.770 回答
1

#mainNav #toTop a使用Descendant Combinator指定 id 元素a的后代元素 id元素的toTop后代元素mainNav。

正如其他答案所说，这条规则似乎过于具体，因为IDs 必须是唯一的，然后#toTop a应该可以解决问题。

选择声明此规则的真正原因是：

假设在一个网站中你有一个或多个共享CSS（阅读：你没有为每个页面使用不同的 CSS），这条规则意味着：

  • 在a是 的后代#toTop但#toTop也是#mainNav元素的后代的页面中，则应用此规则；
  • 在a是 的后代#toTop但#toTop不是#mainNav元素的后代的页面中，则不要应用此规则；

因为#toTop可能是一个可重用的元素，可以在不同的地方（当然是每页一个）声明，例如在#mainNav页面内部和#sideNav另一个页面内部，具有所需的潜在不同行为和外观感觉。

于 2013-03-13T17:37:56.230 回答