我正在尝试为更大的div结构中的div添加样式,并且该对象在结构中下面存在某个类。的HTML是
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<div class="ds-2col-stacked-fluid node node-lesson node-promoted node-teaser contextual-links-region view-mode-teaser teaser-layout clearfix" typeof="sioc:Item foaf:Document" about="/node/673">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="group-header teaser-header">
<div class="group-left teaser-left">
<div class="field field-name-field-lessonintro field-type-text field-label-hidden">
<div class="field-items">
<div class="field-item even">
<p>Some text</p>
我创建的类是左向左和向右向右。我看到包含字段的外部div是
<div class="views-row views-row-1 views-row-odd views-row-first">
如果我做
.views-row > div {
border: 1px solid #a1c0df;
}
它有效,但这将适用于我不希望将其适用的事物。所以说真的,我试图找出一个可以在上面完成的选择器,但是仅当div在嵌套中的下端包含teaser-left或teaser-right时才可以。
谢谢!
最佳答案
如果teaserleft | right是views-row的直接子代
.views-row > .teaser-left,
.views-row > .teaser-right {
border: 1px solid #a1c0df;
}
如果嵌套得更深
.views-row .teaser-left,
.views-row .teaser-right {
border: 1px solid #a1c0df;
}
如果适用,第一个解决方案是更有效的CSS(更快地渲染),但IE6不支持(以防您仍然需要)
另一个选择是创建类.views-row-teaser-left,.views-row-teaser-right并解决这些问题,并且仅在您的CSS中解决这些问题
.views-row-teaser-left, .views-row-teaser-right { border: 1px solid #a1c0df; }
这在每个浏览器中都有效,并且是效率最高的CSS,并且具有较低的特异性(这使得在其他样式声明中更容易推翻,并且不会使您陷入“特异性战争”)。如果您可以更改html,建议您这样做。