0

我正在使用一个自动生成一些 HTML 页面的应用程序，我需要在这些页面中编写一些 CSS 文件。我想重用几个类（由 jquery-ui 主题生成），但我无法更改任何 HTML 元素。

那么，是否可以将相同的类规范分配给 id？

如果这是可能的，那么我会很容易地在我的类和 id 之间创建一个映射。

例子：

<html>
<head><style>
#charlieID {
    /* I want #charlie to be identical to .alphaClass */
    /* Assume that I can not change the HTML (it will be auto generated by another application)*/
}

.alphaClass {
    font-size: small; 
    color: lime;
}

.betaClass {
    font-size: medium;
    color: blue;
}
</style></head>
<body>
    <p class="alphaClass">Alpha</p>
    <p class="betaClass">Beta</p>
    <p id="charlieID" class="charlieClass">Charlie</p>
<body></html>

我将在整个应用程序中管理数百个（可能是数千个）ID，而不必在一个页面中进行管理。所以，当涉及到 CSS 时，我有完全的自由，因此我可以将它分解为几个 CSS 文件（每个页面一个文件）来控制 ID 和我的类的另一个主 CSS。

4

4 回答 4

2

是的，当然了。一个 CSS 规范可能有多个目标。要将相同的规则定位到 class 和 id，只需执行以下操作：

#charlieID, .alphaClass {
    font-size: small; 
    color: lime;
}

注意分隔目标的逗号。

补充回答：

如果您有数十万个 id 要匹配，那么这个标准方法（不需要额外的脚本或库，只需常规 CSS）实际上比任何可能的替代方法都要小。考虑：

/* Standard CSS */
#charlieID1, #charlieID2, #charlieID3, #charlieID4, #charlieID5,
#charlieID6, #charlieID7, #charlieID8, #charlieID9, #charlieID10,
#charlieID11, #charlieID12, #charlieID13, #charlieID14, #charlieID15,
#charlieID16, #charlieID17, #charlieID18, #charlieID19, .alphaClass {
    font-size: small; 
    color: lime;
}

并将其与：

/* LESS CSS. Needs to be compiled with LESS */
.alphaClass {
    font-size: small; 
    color: lime;
}

#charlieID1 {
    .alphaClass
}
#charlieID2 {
    .alphaClass
}
#charlieID3 {
    .alphaClass
}
#charlieID4 {
    .alphaClass
}
#charlieID5 {
    .alphaClass
}
#charlieID6 {
    .alphaClass
}
#charlieID7 {
    .alphaClass
}
#charlieID8 {
    .alphaClass
}
#charlieID9 {
    .alphaClass
}
#charlieID10 {
    .alphaClass
}
#charlieID11 {
    .alphaClass
}
#charlieID12 {
    .alphaClass
}
#charlieID13 {
    .alphaClass
}
#charlieID14 {
    .alphaClass
}
#charlieID15 {
    .alphaClass
}
#charlieID16 {
    .alphaClass
}
#charlieID17 {
    .alphaClass
}
#charlieID18 {
    .alphaClass
}
#charlieID19 {
    .alphaClass
}

这只是 19 个 ID。

然而，有一个更好的解决方法。如果您确实有数十万个可能的 id，那么针对这些 id 可能是错误的做法。相反，您应该真正查看文档的结构，看看您想要定位的东西是否可以通过其他方式定位。

一种替代方法是根据事物的父对象编写目标。例如，如果您有这样的结构：

<div class='foo'>
    <span id='charlieID'></span>
</div>

然后你可以像这样定位它：

div.foo span, .alphaClass {
    font-size: small; 
    color: lime;
}

创造性地寻找可以定位的常见结构。您还可以使用其他技巧，例如使用子选择器或兄弟选择器。我强烈建议至少阅读一篇高级 CSS 教程。但请注意，一些较旧的浏览器不支持一些更有用的规则。不过，既然您提到 CSS3，您可能还是针对较新的浏览器。

如果一切都失败了，没有什么可以说您不能生成 CSS 文件而不是手动输入它：

#! /usr/bin/env tclsh

# Sample script to print rule with thousands of target.
# (note: I have no idea what thousands of targets do to various browsers)

set targets {}
foreach {name idx} {"#charlie" 1000 ".alphaClass" "" "#jane" 500} {
    if {$idx == ""} {
        lappend targets $name
    } else {
        for {set i 0} {$i < $idx} {incr i} {
            lappend targets "$name$i"
        }
    }
}
puts [join $targets ","]
puts "{font-size:small; color:lime;}"

# should print a rule with the following targets:
# #charlie0..#charlie999, .alphaClass and #jane0..#jane499
于 2013-04-09T01:48:06.010 回答
2

AFAIK 没有办法在纯 CSS 中“继承”现有类的样式。

如果可以接受客户端脚本，则可以动态添加类。jQuery 示例：

$(document).ready(function() {$('#charlieID').addClass('alphaClass');});

请注意，如果您确实有能力更改现有的 CSS，那么我误解了您的问题。在这种情况下，您不必显式重写样式，只需使用逗号分隔的列表：

#charlieID, 
.alphaClass {
    font-size: small; 
    color: lime;
}

由于您确实能够编辑 CSS，因此您还可以查看更高级别的语言，例如LESS。在 LESS 中，您可以执行以下操作：

.alphaClass {
    font-size: small; 
    color: lime;
}

#charlieID {
    .alphaClass
}
于 2013-04-09T01:48:22.460 回答
2

对于您的问题：不，您不能继承样式。如果您使用像@slebetman 建议的多个选择器，那么您可以实现效果，但这需要您修改（可能缩小的）jquery ui css 文件，这可能很麻烦。

如果您能够安装 ruby​​（或有可用的 ruby​​），那么您可以安装 sass，它是一个“高级 CSS”（总而言之，它更多的是在本质上）。

这可以使用和 viola来完成，gem install sass然后只需编译您的文件。sass filename.scss:filename.css

最后，这样做的好处是可以让您轻松继承这些样式，假设您有两个文件，cannotedit.css并且mycss.scss. 首先，将您的名称重命名cannotedit.css为_cannotedit.scss（不需要任何额外更改，因为所有 CSS 都是有效的 SCSS）。添加的下划线防止它被单独编译，这使您最终受益于所有这些都在一个 CSS 文件中。

_cannotedit.scss

.center {
  margin: 0 auto;
}

并且您希望将这些样式应用于 ID 但重用它们（请原谅过于简单的示例）：

mycss.scss

@import "cannotedit";

#someId {
  @extend .center;
  color: red;
}

而且bam，您编译的文件将具有两者的内容，_cannotedit.scss并且mycss.scss扩展ID将从样式中“继承”样式。这可能（或可能不会）对您的项目来说太过分了，但我想将它添加到您的选项列表中。

最后说明

如果您无法使用 ruby​​，还有其他选项，例如 LESS 或 Stylus，我知道 Stylus 在 Node.js 上运行，但我不确定 LESS 在什么上运行（可能是 Node.js，不记得了）会执行大致相同的操作我只是推荐 Sass，因为它很容易而且我更喜欢它（主要归功于指南针插件）。

资源

  1. 萨斯
  2. 较少的
  3. 手写笔
于 2013-04-09T02:02:41.227 回答
0

以下是关于何时使用 ID 和 CLASS 的一个很好的解释：http: //css-tricks.com/the-difference-between-id-and-class/

对于您的问题，一个元素可以同时具有 ID 和类。

于 2013-04-09T01:45:09.243 回答