互相影响的无关CSS ID

我目前正在重新设计一个我的网站，它有两列。左栏是包含一些链接和文字的侧栏，右栏是页面的正文（不是<body>）。我遇到的问题是页面上两个完全分离的元素的CSS规则影响这两个元素。互相影响的无关CSS ID

因为这可能是没有意义的，这是我的代码：

CSS

#left h1, h2, h3, h4, h5, h6 { 
    padding: 10px; 
    color: black; 
} 
#right h1, h2, h3, h4, h5, h6 { 
    padding: 0px 10px; 
}

HTML

<div id="left"> 
    <?php include('sidebar.php'); ?> 
</div> 

<div id="right"> 
    <h2>Blah blah blah welcome</h2> 
    <p>Yadda yadda yadda.</p> 

    <div class="sep"></div> 

    <h2>Etc etc</h2> 
    <p>The end.</p> 
</div>

我试图做的是去除#right标题的顶部和底部填充，但由于某种原因，无论我做什么，CSS ID都是相互影响。我不仅可以在物理上看到它，当我检查Google Chrome中的代码时，这两个元素都具有归因于它们的规则#left和#right。本质上，#right标题仍然有顶部和底部填充。

我试着从页面中全部删除#left或#right以查看CSS规则是否会受到影响，但它什么也没有做。

我该怎么办？这是一种错误吗？我的代码有什么问题，我不知道什么原因？

我希望我有道理。提前致谢！

来源

2012-06-20 Abluescarab

的'一，B'（分组）比'ab'（后代）具有更低的优先级，因此ID选择符仅适用于'h1's。 –

#left h1，h2，h3，h4，h5，h6仅影响h1而不影响h2至h6。 –

这样写：

#left h1, #left h2, #left h3, #left h4, #left h5, #left h6 { 
    padding: 10px; 
    color: black; 
} 
#right h1, #right h2, #right h3, #right h4, #right h5, #right h6 { 
    padding: 0px 10px; 
}

来源

2012-06-20 12:44:23 sandeep

谢谢！经过多年编写CSS，我仍然不知道。当然，我还在早上五点写作。无论如何，谢谢一堆！ – Abluescarab

“无关”？因为您在行前加#left？
不需要。您必须在每个子选择符前添加#left以获得所需的结果。

#left h1, h2, h3, ... {} 
/* is equivalent to */ 
#left h1 {} 
h2 {} 
h3 {}

应该是：

#left h1, #left h2, #left h3, ... {}

我同意，复制那么多不好玩。为了提高您的工作效率，您可以使用CSS预处理程序，如LESS或SASS，然后旁边的选择：

/* Note: THIS IS NOT PURE CSS, USE A CSS PRE-PROCESSOR */ 
#left { 
    h1, h2, h3, h4 { ... } 
}

来源

2012-06-20 12:44:08

互相影响的无关CSS ID

回答

相关问题