如何创建 CSS 类 Union？

发布于 2024-09-30 03:32:01 字数 438 浏览 6 评论 0原文

我有一个结合 CSS 类的 div：

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

我的自定义类是所有组合类的交集？我似乎找不到关于如何完成此操作的示例或很好的解释。

预先感谢您阅读我的问题！

原文

I have a div that unions CSS classes as such:

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

How do I create a CSS style that I can combine all of these classes together into a single class with a discreet name?

example:

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

Where my custom class is an intersection of all of the combined classes? I can't seem to find an example or good explanation of how this is done.

Thanks in advance for reading my question!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安穩 2024-10-07 03:32:01

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

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

或者手动向每个 HTML 元素添加通用类。

如果您想定位具有某些类的元素，可以执行 .one.two. Three {}

AFAIK that's not possible in CSS. You can either feed rules to multiple selectors:

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

Or manually add a generic class to every HTML element.

If you want to target elements that have certain classes you can do .one.two.three {}

回复收藏 0 原文

一瞬间的火花 2024-10-07 03:32:01

您可以尝试使用 LESS 或 SCSS 之类的东西来实现这些类的可重用元素在 mixin 中。请注意，您不必在 ruby 应用程序中使用其中任何一个； PHP、JavaScript、.NET 和 SCSS 中有多个 LESS 端口，您可以单独运行（但需要 ruby 才能运行）

回复收藏 0 原文

不念旧人 2024-10-07 03:32:01

我认为你是在倒退着看问题。如果所有这些类都具有与之关联的相同 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; ?>">

I think you're looking at the problem backwards. If all those classes have the same CSS rules associated with them, then you should just combine those rules in your stylesheet. However I think you'll ultimately find, as Jason McCreary comments, that will lead to less flexibility and more work.

It's likely that the classes listed in your example are from some UI framework, and elements further down the DOM tree are going to get styled depending on whether they're a descendent of an element with a particular class, ie. rules like this:

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

But then there'll be other rules like this:

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

If you want to combine these class names, you'll end up with something like this:

.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 */}

It's the separation of class names which keeps the stylesheet manageable.

If typing all those classes in repeatedly is getting to you then use a variable to hold them in your page generation code, something like:

<?
$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; ?>">

回复收藏 0 原文

~没有更多了~