如何将CSS类转换为id？

发布于 2024-12-03 03:02:14 字数 651 浏览 3 评论 0原文

这是 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>

有人可以帮忙吗？

原文

this is the CSS code...

.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;
}

and this is the code I am using to display a breadcrumb...

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

I want the css code to be modified so that I can use id instead of class, as in:

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

Can someone help?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

带上头具痛哭 2024-12-10 03:02:14

将 CSS 中的 . 更改为 #。

话虽如此，如果您要使用 id 选择器，则应该确保在任何给定时间您的页面上都只存在该 p 的单个实例。

回复收藏 0 原文

天煞孤星 2024-12-10 03:02:14

您所要做的就是更改“.”到 '＃'。就像 @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;
}

All you have to do is change '.' to '#'. Like @Demian Brecht said, you should make sure that you only have one element on your page that has id="breadcrumb". You might be better off sticking with a class for this unless you are absolutely sure that there will only be one of these.

CSS class selectors don't have a big hit on page performance. I generally only use ID's for layout elements and then try to keep all the other selectors as classes. It will help when you want to reuse the the styles on multiple elements. ID's do however increase performance drastically for scripting, but if you search for a class within the context of a tag that does have an ID, the performance is still pretty good.

Here's how you would modify it.

#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;
}

回复收藏 0 原文

~没有更多了~