css中id与class

CSS中ID与Class的基础概念

ID（Identifier）：

ID是唯一的，每个页面中只能有一个元素使用特定的ID。
ID用于标识页面中的特定元素，通常用于JavaScript操作或CSS样式化。
ID在HTML中使用#符号来定义，例如：<div id="header"></div>。

Class（Classification）：

Class可以被多个元素共享，用于将一组具有相同样式的元素归类。
Class用于定义可重用的样式，便于维护和更新。
Class在HTML中使用.符号来定义，例如：<div class="container"></div>。

类型

ID类型：

标识符（Identifier）：用于唯一标识页面中的元素。

Class类型：

分类（Classification）：用于将具有相同样式的元素归类。

应用场景

ID的应用场景：

页面导航：标识主导航栏或特定页面部分。
JavaScript操作：通过ID选择元素进行DOM操作。

Class的应用场景：

样式复用：定义一组元素的通用样式。
响应式设计：根据不同的屏幕尺寸应用不同的类。

遇到的问题及解决方法

问题1：ID重复使用

原因：在同一个页面中使用了相同的ID。
解决方法：确保每个ID在页面中是唯一的。

问题2：类选择器性能问题

原因：类选择器可能会影响页面加载性能，特别是在大型项目中。
解决方法：优化CSS选择器，尽量减少嵌套层级，使用更具体的选择器。

问题3：类名冲突

原因：不同的组件或库使用了相同的类名。
解决方法：使用命名空间或BEM（Block Element Modifier）命名约定来避免冲突。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID vs Class Example</title>
    <style>
        #header {
            background-color: blue;
            color: white;
            padding: 10px;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="header">Header Section</div>
    <div class="container">
        <p>This is a container with some content.</p>
        <div class="container">Nested container</div>
    </div>
</body>
</html>

参考链接

通过以上信息，您可以更好地理解CSS中ID与Class的基础概念、优势、类型、应用场景以及常见问题及其解决方法。

页面内容是否对你有帮助？

有帮助

没帮助

CSS编码(ID & Class)

、

我必须设计两种不同的布局，我只想使用通用的ID名称。我只是想让你明白，我心里想的是什么，请注意js (我们使用js的时候，id确实很重要)。commonPage.css > #left { width:25%;" type="text/css"/>

浏览 4提问于2011-08-05得票数 1

回答已采纳

4回答

(Class)替换CSS "#“(ID)

、、

我有一个CSS字符串 color:#ee2ee2; .abc{ } border-color:1px solid #ddd;我需要将#xyz (或任何其他ID

浏览 8提问于2019-11-01得票数 2

回答已采纳

1回答

CSS与2个class/id中的:link和a:visited冲突

我对两个class/id的:visited和:link有问题。=/<div id="title"><a href="#">Hello World</a></div><br><br> <font id="PageCounter"><a href

浏览 3提问于2011-06-15得票数 2

回答已采纳

1回答

带有id和class的Css

我有一个奇怪的反应与css在一个网站，我正在做。有这样的代码没有运气，因为我只想把颜色改成这个id因为如果我使用自定义<

浏览 2提问于2015-12-27得票数 0

回答已采纳

1回答

height: 75vh; height: 30vh; 这将允许这两个横幅遵循所有相同的规则，以保持移动响应-即他们都在id一个简单的解决方法是将一个id=标记为“bannerX”，将一个id=标记为“bannerY”，然后复制相应X或Y下的所有后续CSS。但这只会导致大量完全相同的CSS的复制，只是原始ID改变了其中的一个规则。这是可行的，但似乎是一种非常混乱的方式。我相信一定有更好的方法来解决这个问题

浏览 11提问于2017-07-09得票数 0

1回答

区域css (class或id或attr)

、、

有没有办法给面积标签添加属性？我在到处搜索，没有外部插件的情况下找不到任何方法来做这件事，它不是一个地图，只是一个带有区域的图像，可以点击并更改状态和颜色。

浏览 0提问于2014-02-10得票数 0

7回答

CSS: class和id可以互换吗？

、

我知道有人问过在CSS文件中使用class和id的问题，比如如果我违反规则，浏览器的CSS解释器会抛出错误吗？我还没见过这样的事呢。那么为什么我们同时拥有id和class</

浏览 0提问于2009-03-23得票数 1

回答已采纳

4回答

#id.class css是什么意思？

、

我在CSS声明中看到了这样的情况： display:none;有人能解释一下这意味着什么吗？html代码如下 <li><a href="#">Home3</a></li> <li>

浏览 3提问于2015-10-22得票数 2

回答已采纳

4回答

css id vs class，一些想法

、

我认为我理解了css文档中id的vs类。据我所知，html文档中应该只有一个id元素的实例和许多class元素。现在我在看微软驱动的页面模板，它是在每个新的mvc3项目中生成的，我看到有.page元素，而不是# Site.css？我是不是漏掉了什么？

浏览 0提问于2012-11-04得票数 0

回答已采纳

4回答

HTML + CSS:向简单文本添加class/id

、

我现在遇到了一个可能非常微不足道的问题：<head></head> This is a Text about Foobar</body> 如何在不破坏格式的情况下为单词Text分配CSS-class/id？假设我想向其中添加类.yellow，它将以黄色背景显示文本。我想我有什么东西挡住了我的心，因为它不会那么难…但我所能搜索到的(大多数是琐碎的教程)只在常见

浏览 4提问于2013-02-07得票数 9

回答已采纳

2回答

用html/css链接ID & Class的Direkt

、

我的页面上有一个按钮，可以像这样切换前视图： <span class="cats"><i class="fa fa-tags"></i> Stöbern</span> <span class="search active"><i class="fa f

浏览 0提问于2015-06-22得票数 1

回答已采纳

2回答

css选择器在“id class img”中失败

、

html： <img class="logo" src="http://www.dalcanton.it/tito/code/alcaze/foobar.png">css： margin-top: 100px;就这么简单，有人能看出来吗？

浏览 4提问于2014-08-08得票数 1

回答已采纳

4回答

如何使用id或class分隔css属性？

、

我想做的是：div#test { color: green;}<div id="test"></div> <span>Text2</span> 我只想将color:green(而不是background-color)应用于具有id

浏览 3提问于2016-08-23得票数 1

1回答

如何在css中通过class/id调用精灵图片？

、、、

我必须将所有这些微小的图像都包含在同一个sprite图像中。我使用了一个在线工具来创建sprite，并且我得到了一个css文件，该文件指示了sprite中的不同图像作为输出，以便将它们包含在我的项目中。我可以使用以下方法在我的html文件中检索sprite图像：我的问题是。如何将url链接替换为sprite图像指示器(class/id</e

浏览 14提问于2017-01-07得票数 1

回答已采纳

3回答

不带class/id的父级的css

、

我有： <p class="class1"> <p> </p>我想

浏览 0提问于2013-11-21得票数 0

11回答

CSS关于ID和Class的最佳实践？

我一直在读一本关于CSS的SitePoint书。在我做过的一些CSS设计中，我总是发现使用Class作为选择器更容易，也更通用。也许这是.Net的事情，因为我们并不总是可以控制元素的ID…… 这里的最佳实践是使用CLASS或ID作为选择器吗？

浏览 15提问于2008-11-18得票数 39

回答已采纳

1回答

CSS：#id .class VS .class性能。哪一个更好？

、

我假设这样会更快：比：当然，忽略第一个示例中的.videoContainer

浏览 0提问于2011-10-02得票数 19

回答已采纳

1回答

CSS层次结构div>table>td>id>class

、、

<div class="order_bar"><tbody><td id="adress_data_bar" class="order_bar_active"> </td></tr></tbody></table></

浏览 26提问于2014-06-04得票数 0

3回答

在MVC3中使用CSS* id/class id的帮助*

、、、

在使用MVC并在我的视图中创建布局时，我发现没有继承多个CSS样式。在上面的部分中，我有一个div标记。但是，当我使用类属性时对于这些div标记中的每一个，只会检测到第一个。其余的div标记似乎继承了主体样式。也定义在主CSS文件中。有人能告诉我一些关于

浏览 2提问于2011-03-16得票数 1

回答已采纳

3回答

将主元素分配给id的HTML

、

说明说要将主元素分配给一个名为英雄的id (我是在css文件中创建的)，我已经尝试过在googling上搜索帮助，老实说，我实在想不出该怎么做。我试着做div class=的“英雄”，但它没有效果，我的教科书似乎没有这方面的例子。谢谢你的帮助。这是id im试图使用如果它有帮助，height: 300px;background-image: url(heroroad.jpg); background-size

浏览 3提问于2017-02-16得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

css中id与class