Question

这是CSS代码......

.breadcrumb {
    font-size: 10px;
    background-color: #006600;
    padding: 0px 2px 2px 2px;
    text-align: center;
    color: #FFFFFF;
}

.breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
}

.breadcrumb a:visited, .breadcrumb a:active {
    color: #FFFFFF;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

这是我用来显示面包屑的代码......

<p class="breadcrumb">Breadcrumb PHP code goes here</p>

我希望修改css代码，以便我可以使用id而不是class，如：

<p id="breadcrumb">Breadcrumb PHP code goes here</p>

有人可以帮忙吗？

Answer 1

将CSS中的.更改为#。

话虽如此，如果您打算使用ID选择器，您应该确保在任何给定时间页面上只有p的单个实例。

Answer 2

你所要做的就是改变'。'至 '＃'。就像@Demian Brecht说的那样，你应该确保你的页面上只有一个id =“breadcrumb”的元素。除非你绝对确定只有其中一个，否则你可能最好坚持使用一个类。

CSS类选择器对页面性能的影响不大。我通常只使用ID作为布局元素，然后尝试将所有其他选择器保留为类。当您想要在多个元素上重用样式时，它会有所帮助。但是，ID会大大提高脚本的性能，但如果您在具有ID的标记的上下文中搜索类，则性能仍然相当不错。

以下是修改它的方法。

#breadcrumb {
    font-size: 10px;
    background-color: #006600;
    padding: 0px 2px 2px 2px;
    text-align: center;
    color: #FFFFFF;
}

#breadcrumb a {
    color: #FFFFFF;
    text-decoration: none;
}

#breadcrumb a:visited, #breadcrumb a:active {
    color: #FFFFFF;
}

#breadcrumb a:hover {
    text-decoration: underline;
}

如何将CSS类转换为id？

2 个答案: