0

我目前正在重新设计我的网站以拥有两列。左栏是带有一些链接和文本的侧边栏，右栏是<body>页面的正文（不是）。我遇到的问题是页面上两个完全独立的元素的 CSS 规则会影响这两个元素。

由于这可能没有意义，这是我的代码：

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 规则是否会受到影响，但它没有做任何事情。

我能做些什么呢？这是某种错误吗？我的代码是否有问题而我出于某种原因看不到？

我希望我是有道理的。提前谢谢！

4

2 回答 2

3

像这样写：

#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-20T12:44:23.140 回答
2

“无关”？因为您在该行前面加上#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-20T12:44:08.840 回答