制作特定于一个div的CSS

所以我一直在编辑jQuery的selectMenu UI插件中的CSS。制作特定于一个div的CSS

我有一个单独的文件，其中包含我的所有CSS。我希望始终将其包含在每个页面请求中，但只能将其应用于我的选择菜单，而不是其他jQuery UI元素。

我该如何做到这一点？

我已经在容器中为链接和包含UL的包装器跨度放置了一个名为“myClass”的类。这是一个例子。

.ui-state-default, 
    .ui-widget-content .ui-state-default, 
    .ui-widget-header .ui-state-default { 
    border: 1px solid #DDDDDD; 
    color: #a8a8a8; 
    font-weight: bold; 
}

什么我添加到这个类，所以它只适用于“myClass”div下面的元素？

来源

2011-08-02 bobber205

链他们像：

.myclass .ui-state-default, 
    .myclass .ui-widget-content .ui-state-default, 
    .myclass .ui-widget-header .ui-state-default { 
    border: 1px solid #DDDDDD; 
    color: #a8a8a8; 
    font-weight: bold; 
}

如果你想通过DIV的ID把它们连：

#myDiv .ui-state-default, 
    #myDiv .ui-widget-content .ui-state-default, 
    #myDiv .ui-widget-header .ui-state-default { 
    border: 1px solid #DDDDDD; 
    color: #a8a8a8; 
    font-weight: bold; 
}

来源

2011-08-02 19:09:50 Mrchief

nope ..那里有多条规则，所以你需要用'.myClass'前缀所有的规则。 '，'是用来分隔规则的。 –

糟糕（没注意到逗号），更正了答案。感谢您指出。 – Mrchief

不是问题... –

您可以指定任何上市了层次结构中存在的顺序或使用箭头直接继承。例如

.myClass .foo { 
} 

<div class="foo">   <!-- WILL NOT apply to this "foo" --> 
    <div class="myClass"> 
    <div class="foo">  <!-- WILL apply to this class, it's beneath .myClass -->

说它只适用于class为“foo”的元素落在具有“myClass”类的元素下面。

.myClass > .foo { 
} 

<div class="myClass"> 
    <div class="foo">  <!-- WILL apply to this class, it's DIRECTLY beneath .myClass --> 
    <div class="bar"> 
    <div class="foo">  <!-- WILL NOT apply to this class (not directly beneath .myClass) -->

（注意>）意味着将只适用于一个元素归入“富”正下方的元素归入“MyClass的”。

如要进一步了解，请参阅w3 spec. on CSS selectors

来源

2011-08-02 19:10:34

.myClass .ui-state-default, .myClass .ui-widget-content, 
.myClass .ui-state-default, .myClass .ui-widget-header, 
.myClass .ui-state-default { 
    border: 1px solid #DDDDDD; 
    color: #a8a8a8; 
    font-weight: bold; 
}

来源

2011-08-02 19:10:49

您可以使用下面的CSS选择器选择你的MyClass的类下的元素...

.myClass .childClassName { }

我有点不清楚到底是什么你问，但希望这会有所帮助。

来源

2011-08-02 19:12:07

制作特定于一个div的CSS

回答

相关问题