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

2023-11-24

我一直在阅读有关 CSS 的 SitePoint 书籍。

这些示例让我印象深刻的是使用 ID 作为 CSS 选择器。

我做过一些 CSS 设计,我总是发现使用 Class 作为选择器更容易、更通用。

也许它是一个 .Net 的东西,因为我们并不总是能够控制元素的 ID...

这里的最佳实践是使用 CLASS 或 ID 作为选择器吗?


我猜他们总是在示例中使用 id,因为它不太模糊。你知道他们正在专门谈论that一个元素及其样式。

一般来说,经验法则是你应该问自己:“现在或将来的任何时候,是否有多个元素需要相同的样式?”,答案甚至是“也许”,然后制作它一类。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于 ID 和 Class 的 CSS 最佳实践? 的相关文章

  • 如何获取 Google Chrome 中所有加载的 CSS 类的列表?

    有时我需要打印 CSS 类列表才能找到合适的类 最适合我的是 JS 控制台中的函数 当您键入时 JS 类列表会被加载和过滤 例如 如果我需要记住一个图像类 我输入 Img 然后加载图像类列表 ImgFolder ImgPencil var
  • 使用最后一个子选择器减少 CSS

    我在用less并试图得到last输入有一个边距底部 of 10px 这是我所拥有的 但它不起作用 并且没有在最后一个输入上应用 margin bottom 有什么想法吗 input margin bottom 0px last child
  • CSS3 变换:IE 中的缩放

    我想使用CSS3属性transform scale div transform scale 0 5 0 5 有没有办法在 Internet Explorer 8 及更低版本中模仿这个 可能与filter或者 JavaScript 解决方案
  • 悬停时从下到上填充按钮背景,从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • 如何在 Rails 5 中设置资产管道以使用自定义字体?

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • Flexbox 项目的完美圆形边框半径[重复]

    这个问题在这里已经有答案了 我有类似这样的项目 它们是弹性盒容器内的弹性项目 我的正常尺寸物品 我的物品被挤压 我的 CSS 看起来像这样 body display flex flex direction column align item
  • 如何实现弧形顶部指针

    有人可以帮忙解决这个问题吗 如何仅用CSS实现附加按钮 无图像 到目前为止 这是我的代码 triangle up width 0 height 0 border left 25px solid transparent border righ
  • 如何向 div 添加“闪耀”叠加层?

    如何添加如下图所示的漂亮叠加层 考虑以下 HTML 我将如何添加这样的覆盖层 我知道我可以在它上面使用渐变 并对角应用它 但我也可以弯曲它吗 div class photostrip div class overlay div img sr
  • 带条纹的自定义字体 src

    以此作为参考https stripe com docs elements reference stripe elements https stripe com docs elements reference stripe elements
  • 仅在 Safari 中位于 div 外部的文本

    我有这个错误 让一些文本出现在右侧 div 之外的几个像素处 奇怪的是 这种情况只发生在 Safari 中 我以前从未见过它 它只是我使用过的常规 HTML CSS 我在互联网上环顾四周 但找不到完全相同的问题 由于高度固定 只有一些内容在
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • Opera 中 margin-bottom 的计算方式不同

    我有一个具有相对位置的 div 和一个具有绝对位置的子 div div class out div div div CSS container width 100px height 100px position relative insid
  • 使用位置的最大缺点是什么:绝对和顶部/左侧超过浮动和边距+填充,如果网站是固定宽度(970px),居中?

    使用CSS定位最大的缺点是什么 来自 Dreamweaver AP 部门 http livedocs adobe com en US Dreamweaver 9 0 help html content WScbb6b82af55445948
  • 如何在引导程序中制作两个等高的列?

    我有这个代码 HTML div class container fluid div class row div class col md 6 p Line p p Line p p Line p p Line p p Line p p Li
  • 构建两列 html 表单的最佳方法?

    对齐以下内容的最佳方法是什么 我想要 inputTitle左边和右边inputInput在右边 两者之间有错误 CSS crud form width 430px margin 10px solid font family Verdana
  • 将 div 附加到另一个 div 的右侧

    我有一个 div 它就像一个容器 里面有 2 个图像 一张图像位于 div 的左侧 另一张图像位于右侧 我的容器是Bootstrap的容器 它们都用 div 包裹 并且div s position is fixed 我的问题是我无法找到要附
  • CSS3动画比例[重复]

    这个问题在这里已经有答案了 我正在尝试对 div 进行动画处理 以便在页面加载时它具有比例 0 0 并动画到比例 1 1 我遇到的问题是 一旦动画生效 div 就会再次缩放到 0 我想要的是 div 动画缩放 1 1 并保持这样 这是我的
  • Flexbox 列的垂直间距相等

    我在CSS中努力让我的Flexbox在垂直等距的列中显示项目 从而使列的每行之间的空间均匀 html body flex container margin 0 height 100 width 100 body font family Dr

随机推荐

  • 如何更改 Sql Server 2005 中 UDT 的基本类型?

    我的类型为 varchar 50 类型的 x 如何将其更改为 varchar 100 看来我不能啊 你不能 你能做的是 使用 OBJECT DEFINITION 编写包含该类型的所有对象的脚本 放下它们 重新创建具有新长度的类型 重新创建对
  • 在 v21 中设置 AppCompatButton 的样式,使其没有阴影且角半径为零

    我在 XML 布局中定义了一个 AppCompatButton 并为其设置了一个主题 如下所示 android theme style CustomAccentOverlay 我已经设置 android stateListAnimator
  • 为什么“新”运算符使用 -= 来分离事件处理程序?

    为什么我必须使用以下内容来分离事件 object myEvent new MyEvent EventHandler 我有些恼怒new操作员正在工作 有人可以解释一下吗 Update 我已经知道我不必使用 new 运算符来分离事件 但它仍然是
  • 用于自然语言处理的 Java 或 Python [关闭]

    Closed 这个问题是基于意见的 目前不接受答案 我想知道哪种编程语言更适合自然语言处理 Java or Python 我发现了很多有关它的问题和答案 但我仍然迷失于选择使用哪一个 我想知道 Java 使用哪个 NLP 库 因为有很多库
  • 如何将 .net 错误消息语言更改为英语

    我使用的是VS2012 net 4 5和Win7专业版 Win7 是土耳其语 现在我收到土耳其语的错误消息 在Win7专业版中无法安装 卸载语言包 是否可以在不重新安装 VS 或 net pack 的情况下更改错误消息语言 这对我有用 开始
  • 通过连接键来展平地图

    给定一个仅包含关键字键的嵌套映射 例如 foo bar 1 baz 2 3 qux quux 4 corge 5 我该如何实施flatten map以便 flatten map foo bar 1 baz 2 3 qux quux 4 co
  • 如何在java中格式化持续时间? (例如格式 H:MM:SS)

    我想使用 H MM SS 等模式来格式化持续时间 以秒为单位 java 中当前的实用程序旨在格式化时间而不是持续时间 如果您不想拖入库 则可以使用格式化程序或相关快捷方式自行完成 例如 给定整数秒数 s String format d 02
  • sizeof 运算符在预处理器 #if 指令中起作用吗?

    我们可以使用sizeof运算符在 if宏 如果是 怎么办 如果没有 为什么 是否sizeof预处理器中的操作员工作 if指令 No the sizeof 运算符在 C 预处理器条件指令中不起作用 例如 if and elif 原因是 C 预
  • 模拟 Guid.NewGuid()

    假设我有以下实体 public class User public int Id get set public string Username get set public Guid UserGuid get set public Guid
  • Laravel 5,查看::分享

    我正在尝试做一个view share current user Auth User 但在 laravel 5 中我找不到在哪里执行此操作 在 L4 中你可以在 baseController 中执行此操作 但那个不再存在 格兰特 格伦 我正在
  • 隐藏表格滚动条

    经过一些研究 我发现我必须设置表格的 tbody display block overflow auto 启用 html 表格上的滚动 是否有可能隐藏每个现代浏览器 Chrome Safari Firefox 上的通用滚动条 我尝试了一些解
  • python请求http响应500(可以在浏览器中访问站点)

    我试图找出我在这里做错了什么 但我总是迷失方向 在 python 2 7 中 我运行以下代码 gt gt gt import requests gt gt gt req requests request GET https www zoma
  • Wix(VS 安装程序)- 缺少编辑器工具栏

    我的电脑上安装了 Wix 3 10 扩展至 Visual Studio 2015 我创建了一个基于 Wix 的安装项目 可以运行 在安装项目中 通常会有一些图标 安装工具 文件系统 注册表 UI 服装操作 但它们目前缺失 您可以在任何 Wi
  • 如何从 Firefox 插件执行 Windows 命令?

    如何使用 Firefox 插件执行 Windows 命令并显示其输出 例如 ping www stackoverfow com 我只是想通过执行打包在一起的二进制文件 或 可执行文件或运行 Windows 命令来探索更多 Firefox 插
  • Delphi、MDI 与多文档界面的选​​项卡

    我正在开发一个多文档应用程序 目前它使用 MDI 这对我 作为开发人员 以及我相信的用户来说都非常方便 然而有一个 反对 我还没有找到解决办法quickly load many到目前为止 子窗口 每次创建窗口并最大化以填充父窗口区域时 都会
  • 安装 Angular CLI 时收到错误警告

    我是这个平台的新手 我安装了Node js但是当我尝试运行命令时npm install g angular cli我收到这个错误 npm WARN deprecated email protected Legacy versions of
  • git checkout 会更新所有文件吗?

    新问题 我想确保我理解这一点 When I git checkout
  • 夏令时和时区最佳实践[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我希望使这个问题及其答案成为处理夏令时的权威指南 特别是处理实际的转换 如果您有什么要补充的 请做 许多系统都依赖于保持准确的时间 问题在于夏令时导致的时间变化 将时钟向前或向后
  • SQL 更新会在更新运行期间影响其子查询吗?

    我只是编写一个复杂的更新查询 它看起来或多或少像这样 update table join select y min x as MinX from table group by y as t1 using y set x x MinX 这意味
  • 关于 ID 和 Class 的 CSS 最佳实践?

    我一直在阅读有关 CSS 的 SitePoint 书籍 这些示例让我印象深刻的是使用 ID 作为 CSS 选择器 我做过一些 CSS 设计 我总是发现使用 Class 作为选择器更容易 更通用 也许它是一个 Net 的东西 因为我们并不总是