Html CSS id不起作用

我正在尝试两个引导面板的样式略有不同。我决定用不同的id命名它们，然后通过CSS对它们进行样式化。出于某种原因，CSS id选择器不适合我

以下是HTML：

           <div class="col-md-3">
                <div id="price" class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Price</h3>
                    </div>
                    <div class="panel-body">{{ item[0][3] }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="size" class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Size</h3>
                    </div>
                    <div class="panel-body">{{ item[0][2] }}</div>
                </div>
            </div>

---

我所知道的所有CSS/HTML都是自学的，所以我可能在这里遗漏了一些基本的东西。非常感谢您的帮助。

您的CSS选择器在price和panel default之间有一个额外的空间，因此它基本上是在id=price的div中查找class=panel default的子级。要让选择器查找id=price和class=panel default的div，请删除price和.panel default之间的空格。尝试：

price.panel-default{ 宽度：150px； 字号：18px； } size.panel-default{ 宽度：100px； 字号：188px； }

---

CSS选择器在price和panel default之间有一个额外的空间，所以它基本上是在id=price的div中查找class=panel default的子对象。要让选择器查找id=price和class=panel default的div，请删除price和.panel default之间的空格。尝试：

price.panel-default{ 宽度：150px； 字号：18px； } size.panel-default{ 宽度：100px； 字号：188px； }

---

当您在price和.panel default之间放置一个空格时，您告诉CSS查找id=price和class=panel default的子对象

你想要的是：

price.panel-default{ ... }

---

如果没有空格，它将查找一个同时具有class和id的对象。当您在price和.panel default之间放置空格时，您告诉CSS查找id=price和class=panel default的子对象

你想要的是：

price.panel-default{ ... } 如果没有空格，它将查找一个同时具有类和id的对象删除空格：

price.panel-default size.panel-default panel default表示具有类panel default的某个块位于另一个具有id price的块中

删除空格：

price.panel-default size.panel-default panel default表示具有类panel default的某个块位于另一个具有id price的块中

选择CSS时，size.panel-default与size.panel-default不同

size.panel-default可以选择同时包含id大小和类面板默认值的元素：

因此，您的案例的正确CSS是：

price.panel-default{ 宽度：150px； 字号：18px； } size.panel-default{ 宽度：100px； 字号：188px； } 选择CSS时，size.panel-default与size.panel-default不同

size.panel-default可以选择同时包含id大小和类面板默认值的元素：

因此，您的案例的正确CSS是：

price.panel-default{ 宽度：150px； 字号：18px； } size.panel-default{ 宽度：100px； 字号：188px； }

---

请改用price.panel-default。而不使用spacetry price.panel-default。没有spaceWow，我可以发誓我已经试过了。谢谢@我知道这种感觉。很高兴我能帮忙。哇，我发誓我已经试过了。谢谢@我知道这种感觉。很高兴我能帮忙。

<div id="size" class="panel-default"> <-- This is selected -->
</div>

<div id="size">
  <div class="panel-default"> <-- This is selected -->
  </div>
</div>