如何创建CSS类联盟？

我有一个div，工会CSS阶级作为阶级：如何创建CSS类联盟？

<div id="tp" class="ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> 
     ... 
    </div>

如何创建CSS样式，我可以用一个不显眼的名字结合所有这些类的连成一个类？

例如：

<div class="myCustomClass"> 
... 
<div>

凡我自定义类是所有组合类的交集？我似乎无法找到如何完成这个过程的例子或好的解释。

在此先感谢您阅读我的问题！

来源

2010-11-03 Griff

你为什么要凝聚所有的风格？保持它们分开允许更大的灵活性。 – 2010-11-03 15:35:37

我想将这些样式应用于我创建为表格选取器的div。为了使选取器正常工作，我需要始终拥有这些类。 – Griff 2010-11-03 15:44:26

这是一个非常好的问题：ui- *样式可能来自像Twitter引导程序这样的外部库，因此不能简单地将它们合并为一个。 – 2012-05-31 08:57:48

AFAIK在CSS中不可能。您可以将规则提供给多个选择器：

.one, .two, .three { color:red; }

或者手动向每个HTML元素添加泛型类。

如果你想针对的是有一定的类的元素，你可以做.one.two.three {}

来源

2010-11-03 15:34:39

那么，我是否会像myclass {.one，two，.three ...其他属性....}那样在我的CSS中定义一个类？ – Griff 2010-11-03 15:51:31

你没有，因为你不能。 – 2010-11-03 15:52:25

你的情况：'.ui-hidden-on-load.ui-tablepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-helper-hidden-accessible {。 ..规则去这里......} – DanMan 2010-11-03 18:27:30

你可以尝试使用像LESS或SCSS实现这些类in mixins的可重复使用的元素。请注意，您不必在Ruby应用中使用其中任何一种;在PHP，JavaScript和.NET和SCSS中有多个端口，你可以独立运行（但需要ruby运行）

来源

2010-11-03 15:46:19 Bangline

我认为你正在向后看问题。如果所有这些类都具有与它们相关的相同CSS规则，那么您应该只在样式表中组合这些规则。不过，正如Jason McCreary所言，我认为最终你会发现，这会导致灵活性降低，工作量增加。

您的示例中列出的类可能来自某个UI框架，DOM树下面的元素将根据它们是否为具有特定类的元素的后代来进行样式设置，即。像这样的规则：

.ui-tablepicker td a {/* some style */}

但随后还会有其他的规则是这样的：

.ui-widget-content a {/*some other style*/}

如果你想这些类的名称结合起来，你会像这样结束：

.myCustomClass1 a {/* Replaces case where only .ui-tablepicker parent exists */} 
.myCustomClass1 td a {/* Replaces case where only .ui-tablepicker parent exists */} 
.myCustomClass2 a {/* Replaces case where only .ui-widget-content parent exists */} 
.myCustomClass2 td a {/* Replaces case where only .ui-widget-content parent exists */} 
.myCustomClass3 a {/* Replaces case where both exist */} 
.myCustomClass3 td a {/* Replaces case where both exist */}

这是保持样式表可管理的类名的分离。

如果键入所有这些类反复越来越给你，然后使用一个变量来保存他们在您的网页生成的代码，类似：

<? 
$myCustomClass = "ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"; 
?> 
<div id="tp1" class="<? echo $myCustomClass; ?>"> 
    ... 
<div id="tp2" class="<? echo $myCustomClass; ?>">

来源

2010-11-03 16:44:45 robertc

这些类来自JQuery UI框架。基本上我需要它们来使UI组件看起来像我想要的样式。我想替代方案是使用JQuery API来添加类。 – Griff 2010-11-03 18:58:52

如何创建CSS类联盟？

回答

相关问题