Fatal编程技术网
  • css/
  • CSS-是否可以将相同的类规范分配给id

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

css

CSS-是否可以将相同的类规范分配给id,css,Css,我正在使用一个自动生成一些HTML页面的应用程序，我需要在这些页面上编写一些CSS文件。我想重用几个类（由jqueryui主题生成），但是我不能更改任何HTML元素 那么，是否可以将同一个类的规范分配给一个id 如果这是可能的，那么我将很容易地在我的类和ID之间创建一个映射 例如： <html> <head><style> #charlieID { /* I want #charlie to be identical to .alphaClass */

我正在使用一个自动生成一些HTML页面的应用程序，我需要在这些页面上编写一些CSS文件。我想重用几个类（由jqueryui主题生成），但是我不能更改任何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>


#查理{
/*我想让charlie和alphaClass一模一样*/
/*假设我无法更改HTML（它将由另一个应用程序自动生成）*/
}
.alphaClass{
字体大小：小；
颜色：青柠；
}
贝塔克拉斯先生{
字号：中等；
颜色：蓝色；
}
阿尔法

测试版

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

以下是关于何时使用ID和类的一个很好的解释：

对于您的问题，元素可以同时具有和ID以及class。

以下是关于何时使用ID和class的一个很好的解释：

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

是的，当然可以。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>
创造性地寻找你可以瞄准的共同结构。您还可以使用其他技巧，如使用子选择器或兄弟选择器。我强烈建议至少阅读一篇高级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

#/usr/bin/env tclsh
#打印具有数千个目标的规则的示例脚本。
#（注意：我不知道数千个目标对各种浏览器做了什么）
设置目标{}
foreach{name idx}{#charlie“1000”。alphaClass“”#jane“500}{
如果{$idx==“”}{
lappend的目标是$name
}否则{
对于{set i 0}{$i<$idx}{incr i}{
lappend目标“$name$i”
}
}
}
放置[加入$targets”，“]
放入“{字体大小：小；颜色：青柠；}”
#应打印具有以下目标的规则：
##charlie0.#charlie999、#alphaClass和#jane0.#jane499

是的，当然可以。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>


创造性地寻找你可以瞄准的共同结构。您还可以使用其他技巧，如使用子选择器或兄弟选择器。我强烈建议至少阅读一篇高级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



#/usr/bin/env tclsh
#打印具有数千个目标的规则的示例脚本。
#（注意：我不知道数千个目标对各种浏览器做了什么）
设置目标{}
foreach{name idx}{#charlie“1000”。alphaClass“”#jane“500}{
如果{$idx==“”}{
lappend的目标是$name
}否则{
对于{set i 0}{$i<$idx}{incr i}{
lappend目标“$name$i”
}
}
}
放置[加入$targets”，“]
放入“{字体大小：小；颜色：青柠；}”
#应打印具有以下目标的规则：
##charlie0.#charlie999、#alphaClass和#jane0.#jane499

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

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


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




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


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




因为您确实能够编辑CSS，所以您还可以研究更高级的语言，例如。用更少的时间，你就可以