Question

我正在使用一个自动生成一些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用我的类分解。

Answer 1

是的，当然。 css规范可能有多个目标。要将相同的规则定位到类和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可能是错误的。相反，你应该真正看看文档的结构，看看你想要定位的东西是否可以通过其他方式进行定位。

另一种方法是根据事物的父母写一个目标。例如，如果您有这样的结构：

<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

Answer 2

AFAIK没有办法继续＆＃34;继承＆＃34;纯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
}

Answer 3

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

如果你能够安装ruby（或者有ruby可用），那么你可以安装sass这是一个“高级CSS”（总结一下，它更多关于细节）。

可以使用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，因为它很容易，我更喜欢它（主要是因为指南针添加）。

<强>资源

Answer 4

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

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

CSS - 是否可以为id分配相同的类规范

4 个答案:

补充答案：