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 回答