Question

我试图将两个Bootstrap面板的样式略有不同。我决定通过用不同的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：

#price .panel-default {

    width: 150px;
    font-size: 18px;
}

#size .panel-default {

    width: 100px;
    font-size: 188px;
}

我所知道的所有CSS / HTML都是自学的，所以我可能会遗漏一些基本的东西。感谢任何帮助。谢谢。

Answer 1

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

#price.panel-default {

    width: 150px;
    font-size: 18px;
}

#size.panel-default {

    width: 100px;
    font-size: 188px;
}

Answer 2

当您在#price和.panel-default之间添加空格时，您要告诉CSS查找id="price" class="panel-default"的子对象。

你想要的是这个：

#price.panel-default{
   ...
}

如果没有这个空间，它会同时找到一个同时具有类和id的对象

Answer 3

删除空格：

#price.panel-default
#size.panel-default

#price .panel-default表示某个块panel-default的块位于另一个ID为price的块中。

Answer 4

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

#size.panel-default可以选择包含ID size和类panel-default的元素：

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

而#size .panel-default选择一个具有类panel-default并且父元素标识为size的元素：

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

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

#price.panel-default {
  width: 150px;
  font-size: 18px;
}
#size.panel-default {
  width: 100px;
  font-size: 188px;
}

CSS id不起作用

4 个答案: