Question

我目前正在重新设计我的网站，有两个专栏。左侧列是带有一些链接和文本的侧栏，右侧列是页面的正文（不是<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都会相互影响。我不仅可以在物理上看到它，当我检查谷歌浏览器中的代码时，这两个元素都具有归因于它们的#left和#right的规则。基本上，#right标题仍然包含顶部和底部填充。

我已尝试完全删除页面中的#left或#right以查看CSS规则是否会受到影响，但它没有做任何事情。

我该怎么办？这是某种错误吗？我的代码出了什么问题，我出于什么原因没有看到它？

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

Answer 1

像这样写：

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

Answer 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 { ... }
}

不相关的CSS ID会相互影响

2 个答案: