Question

我已经读过你只能在CSS中使用一次ID。我遇到了一些我不理解的奇怪事情，我想知道是否有人可以对此有所了解？

我的标题包含一个带有以下标记的购物篮按钮：

<div id="basket-button-desktop">
    <div id="basket-button-inner"></div>
</div>

当窗口小于580像素时，有一个媒体查询用以下版本替换上面的菜单按钮。

<div id="basket-button-mobile">
    <div id="basket-button-inner"></div>
</div>

我有一个jQuery动画，在滚动时，更改标题和`＃basket-button-inner的颜色上面示例中的外部div都有单独的ID，而嵌套在内部的内部div具有相同的ID。

当屏幕宽度超过580像素时，#basket-button-inner的背景颜色服从jQuery，并在向下滚动页面时从蓝色变为粉红色。当屏幕宽度低于580px时，它会忽略jQuery中设置的值并保持蓝色。

为什么会这样 - 是因为我在我的标记中两次使用相同的ID？

当我读到你不能使用相同的ID两次时，我认为这意味着你不能给两个不同的对象提供相同的ID，并期望你给他们工作的不同CSS代码。我并不认为这意味着你不能在整个页面的不同位置放置具有相同ID的相同对象。

当我将ID更改为此div的类时，它可以正常工作。

我不知道该怎么做。任何建议都将不胜感激。

我在下面放了两个jsFiddles，第一个是带有ID的问题，第二个是用类替换ID的那个。

我已经包含了第一个小提琴的代码。

https://jsfiddle.net/75dtb1zk/37/

https://jsfiddle.net/75dtb1zk/38/

HTML

<header id="header">
    <div id="header-inner">
        <ul id="menu">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>

        <div id="basket-button-desktop">
            <div class="basket-button-inner"></div>
        </div>

        <div id="basket-button-mobile">
            <div class="basket-button-inner"></div>
        </div>

   </div>
</header>

<div class="content">

</div>

CSS

html {
    position: relative;
    height: 100%;
    background-color: darkorange;
}
 body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
#header {
    position: absolute;
    height: 50px;
    width: 100%;
    background-color: transparent;
    border-bottom-color: black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    transition: all .5s;
}
#header-inner {
    height: 50px;
    width: 100%;
}
 ul#menu {
    display: inline-block;
}
 ul#menu li {
    color: green;
    display: inline-block;
    margin: 0px 20px;
}
#basket-button-desktop {
    display: block;
    float: right;
    width: 75px;
    height: 55px;
    cursor: pointer;
}
#basket-button-mobile {
    display: none;
}
.basket-button-inner {
    width: 20px;
    height: 20px;
    float: right;
    margin: 15px;
    background:blue;
}
.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 85%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}
@media only screen and (min-width: 0px) and (max-width: 680px) {
    #basket-button-desktop {
        display: none;
    }
    #basket-button-mobile {
        display: block;
        float: right;
        width: 75px;
        height: 55px;
        cursor: pointer;
    }
}

的jQuery

jQuery(document).ready(function($) {

      $(window).scroll(function() {

      if ($(this).scrollTop() > 75) {

           $("#header-inner").css({
            "position": "fixed",
            "top": "-55px",
            "background-color": "#fff",
            "box-shadow": "rgba(0, 0, 0, 0.1) 0px 1px 0px 0px",
            "visibility": "hidden"
        });

        $(".basket-button-inner").css({
            "background": "pink"
        });

    } else {

      $("#header-inner, .basket-button-inner").removeAttr("style");
    }

    if ($(this).scrollTop() > 150) {

        $("#header-inner").css({
            "transition": "all .5s",
            "transform": "translate3d(0px,55px,0px)",
            "visibility": "visible",
        });

    } else {

        $('#header-inner').css({
            "transform": "translate3d(0px,0px,0px)"
        });

    }


    });

});

Answer 1

这个css是针对班级.basket-button-inner mean class basket-button-inner

.basket-button-inner {
   width: 20px;
   height: 20px;
   float: right;
   margin: 15px;
  background:blue;
}

你应该使用class not id for basket-button-inner

 <div id="basket-button-desktop">
   <div class="basket-button-inner"></div>
</div>


<div id="basket-button-mobile">
   <div class="basket-button-inner"></div>
</div>

Answer 2

这正是它所说的。 ID只能在页面上使用一次。当想要对多个元素执行相同的操作时，您需要使用类而不是ID。事实上，最好只使用类名，除非你遇到需要使用javascript定位一个特定元素和一个元素的情况。 ID几乎永远不会在CSS中使用，因为它们具有最高优先级并且难以覆盖。 #header-inner会比.header-inner更好，但这也会改变你的jQuery代码。使用类名作为jquery选择器时，会返回一个数组。因此，您的jQuery会从$('#header-inner').css...更改为$('.header-inner').each(function() { $(this).css... });

Answer 3

Ids在文档中必须是唯一的（如整个HTML页面）。 That's the hard and fast rule set forth by the W3C：一旦您在一个地方使用了ID，就不应该在该文档中的其他位置再次使用它。

为什么呢？好吧，想想当你尝试对文档运行类似document.getElementById('basket-button-inner')的内容时会发生什么。

会返回什么元素？在这里，javascript期望ID是唯一的，但它们不在你的情况下。那么，该片段会选择哪个元素？

通过违反规则，当您使用内置函数和其他期望ID唯一的函数时，您将会发生奇怪而奇妙的事情。

如果您多次重复使用该ID，您的页面会显示吗？当然。具有该重复ID的元素是否可以正确设置样式？你打赌。您的页面是否会以奇怪和不寻常（以及难以调试）的方式中断，尤其是当您尝试使用javascript选择其中一个元素时？是的。

对于应在任意数量的元素中重复的样式，请使用类。 This is what they're for，它们可以在文档需要的多个不同元素上使用多次。

以这种方式思考：类定义了一个单独的“分类”，任何数量的元素都可以属于该分类（在您的情况下，它是basket-button-inner）。这就是他们的共同点：他们都是那个特定分类成员的按钮;它们恰好出现在手机和桌面上。 ID是一个且只有一个元素可以属于的唯一事物。而已。如果你使用一个ID，你会说“我希望这些东西中只有一个，因为它是如此独特，我给它一个ID。”

一般来说，你需要保留给予ID的东西。值得拥有ID的东西包括非常重要的东西，比如你要在脚本中引用的元素;或者您想要创建新样式上下文的元素，因为ID是非常强大的，非常难以覆盖的特定选择器）

你只能使用一次ID，究竟是什么意思？

3 个答案: