Question

我正在一个drupal网站上工作，这个网站有这些相当疯狂的嵌套div。这是首页上的一个块：

<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具有指定的边距和填充。所以基于我一直在阅读的有关选择规则的内容，我认为这样做会有所帮助：

teaser-left.teaser-right p{
    margin:5px;
    padding:4px;
}

我想在这个级别选择，因为teaser-left和teaser-right是我专门为这些块创建的类，其余的div /类来自drupal核心和模块。所以我不想以引用结构中其他类的方式进行选择，因为它们可能会发生变化。

这就是为什么我认为上面的内容相当于“选择所有p元素，这些元素位于某个结构中的某个位置，在某些时候有预告片左侧或预告片级别。”

我如何正确地做到这一点？

由于

但它没有效果，即使我把！重要。

Answer 1

你犯了一个小错误。您必须在每个类名前添加.才能使选择工作。此外，下面的代码将边距/填充应用于以下层次结构中的P标签：Teaser-left - ＆gt; teaser-right - ＆gt; P.

.teaser-left .teaser-right p{
    margin:5px;
    padding:4px;
}

但是如果你想让左侧或右侧预告片中的所有P标签都有填充，那么您需要稍微修改一下。

.teaser-left p , .teaser-right p{
    margin:5px;
    padding:4px;
}

Answer 2

您需要将.放入班级名称！

.teaser-left p, .teaser-right p {
  margin:5px;
  padding:4px;
  border:1px solid red;
}

选中fiddle。

为什么这个CSS选择器没有选择目标元素？

2 个答案: