将CSS属性应用于ID被忽略-原因

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">元素。此外，在您提供的网站链接中，<img>周围没有<p>标签。

根据您提供的代码，您希望将<p>元素作为目标，该元素是<div id="rt-showcase">的深度嵌套子元素。为此，使用后代选择器:

#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>