Question

我想知道是否可以根据正文ID的值来定义元素的样式。

很难解释，但这样的事情是理想的：

HTML：

<body id="home">

CSS：

body#home {
  a { /* code here */ }
  p { /* code here */ }
}

body#profile {
  a { /* different code here */ }
  p { /* different code here */ }
}

我知道我可以这样做：

body#home a { /* code here */ }

但这变得非常重复。

我期待你的回复，

彼得

Answer 1

如果您使用SASS或LESS

等CSS框架，则可以执行此操作

以下是关于如何使用LESS执行此操作的documentation。希望这会有所帮助。

Answer 2

ID应该是唯一的，因此#home { ... }是可以接受的。

然后，子元素将是：

#home .myClass { ... }

这种技术如果经常用于重新打印页面，只需更改正文中的ID或类。

Answer 3

做你正在谈论的最好的方法是在网站上有一个基本样式表。

他们有：

标题中的<style>元素会覆盖您选择的任何内容

或

为每个页面设置不同的样式表

Answer 4

请注意，尽管可以使用CSS框架支持这样的嵌套样式，但是应该仔细考虑在CSS中保持模块化和干净的继承。你最终可能弊大于利。特别要注意的是初始规则，如下所述：

http://thesassway.com/beginner/the-inception-rule

初始规则：不要超过四个级别。

您对标记所做的任何更改都需要反映到您的标记中   Sass，反之亦然。这也意味着风格是有限的   生活中的那些元素和HTML结构完全如此   挫败了＆＃34; Cascade＆＃34; ＆＃34;层叠样式表的一部分。＆＃34;

如果你遵循这条道路，你也可以回去编写你的CSS   内嵌在您的HTML中（请不要）。

如何使CSS样式依赖于其父元素

4 个答案: