CSS - 类层次结构?

时间:2010-04-30 17:03:41

标签: css css3

我有一个客户前端的网站,其中包含目录,主页,联系页面,关于我们页面等。还有一个行政前端。我想实现一种层次结构,其中具有类“admin”的元素中的任何元素将继承在管理样式表中设置的属性以及从客户样式表继承的任何其他内容。这样做的目的是管理员可以在管理员前端登录,他们可以访问许多高级内容,但他们也可以导航到客户前端,在那里他们可以执行基本任务(例如隐藏目录项,运行如果客户报告问题等,则调试脚本)。我希望客户前端的所有管理工具都具有从管理样式表而不是客户样式中获取的属性 - 这将改变背景颜色和内容。

是否有任何简单的方法可以设置类似名称空间以简化操作,例如:

.admin {
    .list {
        .list-subtitle
        {
        }
        .list-item
        {
        }
    }
    a
    {
    }
}
.customer
{
    .list
    {
        .list-subtitle
        {
        }
        .list-item
        {
        }
    }
    a
    {
    }
}

我知道它可能像:

.admin .list {}
.admin .list .list-item {}
.admin a

我只是不想继续一直放.admin。

有没有人对我如何做到这一点有任何建议?我想我可以编写一个.net类来设置它并根据输入的内容编写一个样式表,但是我将无法读取样式,因此很容易添加各种类似Classes.Add(blah) )等等。

提前感谢任何回复......

此致

理查德

<ul class="customer">
    <li>Will appear as a customer control</li>
    <li>Will appear as a customer control</li>
    <li class="admin">Will appear as an admin control</li>
</ul>
<div class="customer">
    <ul class="admin">
        <li>Will appear as an admin control</li>
        <li>Will appear as an admin control</li>
        <li>Will appear as an admin control</li>
    </ul>
</div>

基本上,正如您所看到的,我希望任何具有“admin”类的元素,或者在具有“admin”类的元素中,就像在管理前端上一样。否则它们会像客户前端那样出现。这也可以反过来使用,以便管理员可以在将其提交到数据库之前预览他们输入的内容,就像它出现在客户前端一样。

如果在CSS中允许使用名称空间,这将没有问题 - 不幸的是,像Less这样的东西似乎是我唯一能够轻松实现这一目标的选择。 (我不幸地说,因为我以前从未使用它,而且我的时间限制非常紧张 - 我对像Less这样的工具没有任何反对意见!)。

此致

理查德

2 个答案:

答案 0 :(得分:7)

您是否考虑过使用Less CSSSASS

答案 1 :(得分:5)

没有原生的CSS方式,但你可以使用类似LESS的东西,它可以让你像这样写它并将它编译成真正的CSS。

还有HSS,它也支持嵌套规则,例如您指定的规则。