【问题标题】:How to write this css in shorter way? see example如何以更短的方式编写这个 css?看例子
【发布时间】:2010-01-26 18:03:41
【问题描述】:

如果是这种情况。

p{margin-bottom:5px}
#top-textContainer p {margin-bottom:10px}

有没有办法用更短的方式写这个,或者没有其他选择

#board-committees #top-textContainer p, 
#corporate-governance #top-textContainer p,
#corporate #top-textContainer p,
#about-us #top-textContainer p,
#contact us #top-textContainer p{margin-bottom:15px}

谁能建议我更好的问题标题并改进我的问题?

【问题讨论】:

  • 你的两个代码片段是在不同的文件中,还是在同一个文件中?

标签: css css-selectors


【解决方案1】:

您在最初的帖子中没有提到的是,由于您使用的是 CMS,因此您无法控制 HTML 源文件,只能控制 CSS。

您还不清楚您的目标,即在您拥有的 150 个页面中,您希望其中一些页面的下边距为 15 像素的段落,而所有其他页面都具有 10 像素。

上述条件下的答案:

不,没有办法缩短 CSS 代码。如果不向 HTML 添加特定的类标签,这是您无法做到的,没有其他方法可以区分您想要 15 像素的页面、您想要 10 像素的页面以及您已经完成的页面。

此规则的例外情况:

  1. 如果您想要不同边距的页面具有其他特定特征,可以在 CSS 中选择,您可以基于此选择并缩短 CSS 代码。例如,如果您的 P 后面总是跟着 BR,或者是 UL 的一部分。但是由于我没有你的消息来源,我不知道是否可能。
  2. 如果您的 CMS 提供向您选择的页面或元素添加 自定义类标签 的可能性,您可以根据该特定类标签的出现来优化您的 CSS。但由于我不了解你们的 CMS,我也不知道是否可以。

【讨论】:

  • 你是对的,但我们不能像 html 一样在 css 中使用相同的 id 吗?我在任何页面上都没有多个 id。这只是在css中
  • 也许我把你的问题弄错了,所以你能解释一下,如果你的页面中只有一个 topTextContainer,为什么你觉得需要在你的 CSS 中指定 5 次 topTextContainer?我认为根本没有理由在你的 CSS 中包含 board-directors、about-us 等 ID?
  • 我在网站上有 150 个页面,但如果内容位于 #top-textContainer > p 中,则仅适用于这些页面,然后我想以不同的方式设置样式。看到我的问题,我已经提到了条件。以及为什么我使用 #id 而不是 .class 因为它是 CMS 生成的
  • 编辑了我的答案以反映您的情况,抱歉样式设置,我目前在移动操作系统上
  • 仍然出错,网站的所有页面都有 #top-textContainer p {margin-bottom:10px} 但我想将 {margin-bottom:15px} 应用于一些需要的页面
【解决方案2】:

将您提到的每个元素(p、#top-textContainer 等)的margin-bottom 设置为 5px?因此,利润会累积到您需要的值。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-17
    • 2015-03-06
    • 1970-01-01
    • 2022-09-25
    • 1970-01-01
    • 1970-01-01
    • 2019-06-28
    相关资源
    最近更新 更多