Question

我想知道在CSS中是否有办法将特定div下的样式打包为不同。以下是我想要完成的一个例子：

<html>
<body>
  <div id="enableTheme">
     <p>some themed html</p>
  </div>
  <div id="disableTheme">
     <p>some none-themed html</p>
  </div>
</body>
</html>

css会做这样的事情：

#enableTheme{
    p{
       css styles
    }
    label{
       different styles
    }
    div{
       even more different styles
    }
    ...
 }

其中具有id“enableTheme”的div下的所有内容都将以我希望的方式为主题。

提前感谢您的帮助

编辑：抱歉，我的问题并不是很清楚。

我知道

#enableTheme p{ 
   //Styles
}

但我的问题是我有一个hude css文件，我不想一个一个地为每个元素添加“#enableTheme”，这就是为什么我想知道是否有办法全局地为一个包做我预制的款式。

Answer 1

你几乎就在那里。尝试

#enableTheme p {
  /* styles */
}

#enableTheme label {
  /* and on and on */
}

顺便说一句，如果您使用SCSS，那么您所写的内容将完全输出您想要的CSS。

编辑：...但我建议在进入Less / Sass / SCSS之前了解更多关于CSS的信息

Answer 2

在常规CSS中，你不能这样做。但你可以这样做：

#enableTheme p{
       css styles
}
#enableTheme label{
       different styles
}
#enableTheme div{
       even more different styles
}

请注意，有LESS和SASS等选项可让您按照自己的建议行事。

Answer 3

使用该语法：

#enableTheme p{
   css styles
}
#enableTheme label{
   different styles
}
#enableTheme div{
   even more different styles
}
...

Answer 4

（这可能是重复的，但无论如何）

是的，这是Descendant Selector。就这样做：

#enableTheme p
{
   css styles
}

#enableTheme label
{
   different styles
}

#enableTheme div
{
   even more different styles
}

Answer 5

尝试

#enableTheme p {

}

#enableTheme label {

}

#enableTheme div {

}

或者，如果他们是直系后代，您可以使用

#enableTheme > p {

}

#enableTheme > label {

}

#enableTheme > div {

}

CSS针对主题

5 个答案: