Question

我有一个joomla网站（尽管这篇文章更广泛地讲述了CSS），它有一个相当复杂的嵌套div结构。该页面的一部分有一个id＃rt-showcase。我有一个横幅，其中放置了一个自动输入的段落元素，并且我试图摆脱（http://dev.pfp-consortium.org/）的底部边距。这个段落元素有我试图覆盖的边距。 joomla结构是

<div id="rt-showcase">
     <div class="rt-showcase-pattern">
        <div class="rt-container">
            <div class="rt-grid-12 rt-alpha rt-omega">
                <div class="rt-block ">
                    <div class="module-surround">
                        <div class="module-content">
                            <div class="custom"  >
                                <p><img src="/images/headerimgs/topimage.jpg" alt="topimage" /></p>

在firebug中，我看到了p属性，它出现在已编译的CSS文件中。我清除了CSS缓存并在我的主题CSS中添加了以下内容：

p#rt-showcase { 
    padding: 0px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
}

但无论我做什么，这个宣言都会被忽略。我认为这样的声明会给出正确的特异性，并优先于可能对此嵌套结构中的其他元素进行的任何其他声明。

有什么想法吗？顺便说一句，我想出了如何防止joomla添加p标签，但现在我真的只想了解为什么我的CSS编辑不起作用......

Answer 1

rt-showcase是div元素。您描述了p元素的CSS选择器。

应该是：

div#rt-showcase { 
    padding: 0px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
}

Answer 2

将CSS定义应用于与p#rt-showcase匹配的元素，该元素必须是选择器中指定的<p id="rt-showcase">元素。此外，在您提供的网站链接上，<p>周围没有<img>标记。

根据您提供的代码，您希望定位<p>元素，该元素是<div id="rt-showcase">的深层嵌套子元素。为此，请使用descendant selector：

#rt-showcase p {
   margin-bottom: 0;
}

请注意，这会影响<p>内发生的所有 <div id="rt-showcase">元素。

如果出于某种原因必须避免这种情况，请将直接父元素的类添加到选择器：

#rt-showcase .custom p {
    margin-bottom: 0;
}

Answer 3

这是一个div而不是段落。

尝试：

div#rt-showcase { 
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

如果要将其应用于子元素：

#rt-showcase > p  { 
        padding: 0px 0px 0px 0px;
        margin: 0px 0px 0px 0px;
    }

Answer 4

我认为你应该

div#rt-showcase { 
    padding: 0px 0px 0px 0px !important;
    margin: 0px 0px 0px 0px !important;
}

因为您引用的元素是<div>而不是<p>

正在忽略将CSS属性应用于ID - 原因？

4 个答案: