CSS选择除h1之外的所有元素答案

【问题标题】：CSS select all elements except h1CSS选择除h1之外的所有元素
【发布时间】：2013-05-22 02:12:00
【问题描述】：

有没有可能用 CSS 做这样的事情：

CSS：

#right div.item-page, #right .newsflashlatest_news {
    padding: 0 133px 0 50px;
    text-align: justify;
}

#right .item-page h1, #right .newsflashlatest_news h1 {
    padding: 0 !important;
}

#right {
    float: left;
    width: 755px;
}

HTML：

<div id="right">
fsfds

<div class="item-page" style="background: blue;">
<h1>Home</h1>
<p>Pri iisque malorum ei, est te suavitate mediocritatem, facer molestie explicari vix ne. </p>
</div>
</div>

我需要将上述规则应用于 div.item-page 中除 h1 元素之外的所有元素。基本上这意味着除了 h1 元素之外的所有元素都会有填充。

简单地添加“#right div.item-page h1”对我的情况不起作用（见这里：http://jsfiddle.net/Pr47M/）

【问题讨论】：

试试#right div.item-page :not(h1){}。
这也会为所有 div.item-page 级别的子元素添加填充（就像 div.item-page div div 也会收到填充，我不需要这个）

标签： css

【解决方案1】：

你可以这样做

#right div.item-page {
     padding: 0 133px 0 50px;  
     text-align:justify;
}
#right div.item-page h1 {
     padding: 0;  
     text-align:left;
}

您也可以这样做

#right div.item-page *:not(h1) {
     padding: 0 133px 0 50px;  
     text-align:justify;
}

【讨论】：

其实我认为它有效，但它没有。因为它会为 div.item-page 的子元素添加填充（例如
），但它也会为所有子元素（所有子元素）添加填充（如

... 那么 subdiv2 也将接收填充，但不是必需的）。填充的第一个选项：0 对我不起作用）。 (tax.allfaces.lv)

【解决方案2】：

根据您的 jsfiddle 使用以下代码更改 css...

#right div.item-page *:not(h1), #right .newsflashlatest_news *:not(h1) {
   padding: 0 133px 0 50px;
   text-align: justify;
}

#right .item-page h1, #right .newsflashlatest_news h1 {
   padding: 0 !important;
}

#right {
   float: left;
   width: 755px;
}

问题解决了。 :)

【讨论】：

【解决方案3】：

为什么不直接写 -

#right div.item-page {
     padding: 0 133px 0 50px;  
     text-align:justify;
}
#right div.item-page h1 {
     padding: 0px;  
     text-align:left;
}

【讨论】：

【解决方案4】：

说真的，有这么多答案，而不是这个……？

#right div.item-page *:not(h1) {
     padding: 0 133px 0 50px;  
     text-align:justify;
}

这完全回答了您的问题，但是您应该永远不要使用* 选择器，这对于性能和可维护性来说是非常糟糕的做法。相反，您应该自己正确地设置元素的样式，并避免过于通用的样式。

【讨论】：

显然没有人听说过 CSS3 :) 只是一个问题，为什么要使用 * ？没有它就不行吗？
没有它也一样，我添加它是为了详细说明它暗示了* 选择器。因为 CSS 是从后到前评估的，所以对于浏览器来说这是一个计算成本非常高的规则 - 它必须为页面上的每个元素评估它。

【解决方案5】：

试试这个：

#right div.item-page {
     padding: 0 133px 0 50px;  
     text-align:justify;
}
#right div.item-page h1
{
padding:0px;
}

没有特定的 CSS 选择器可以排除特定元素。您必须手动添加它。任何由标签和类指定的元素都会自动覆盖一个类。阅读更多关于 CSS 类的信息here。

【讨论】：

【解决方案6】：

试试这个

#right div.item-page *{
    padding-bottom:20px;    
}
#right div.item-page h1{
    padding-bottom:0;   
}

'*'代表div内的所有元素

【讨论】：

【解决方案7】：

你能不能只做类似的事情

#right div.item-page h1{
  padding: 0px;    
}

【讨论】：

【解决方案8】：

只需使用您的课程，但还要在底部添加：

#right div.item-page h1 {
 padding: 0;  
 text-align:whatever-you-need;

}

【讨论】：

【解决方案9】：

没有将特定元素排除在选择之外的 css 选择器。所以你可以使用你的选择器，但你必须添加即

#right div.item-page {
     padding: 0 133px 0 50px;  
     text-align:justify;
}
#right div.item-page h1{
padding: 0;
}

【讨论】：