css选择器规则 - 选择器内的所有元素的ruleset？

使用at-rules，可以在规则事件期间为元素创建规则集（如打印，移动设备等）。但是对于特定的选择器，该怎么办？css选择器规则 - 选择器内的所有元素的ruleset？

我正在一个较大的网站的子页面上工作，我必须使用我的任何页面的主样式表。有时候，一个样式规则会被主样式表中的规则所欺骗。为了克服这一点，我最终不得不在我的所有规则之前添加“#mypage #content等等等等”，以确保我的css更具体。它变得非常快速凌乱。我宁愿做的是一样的东西：

@#mypage { 
     div { 
      border: 1px solid #000; 
      } 
     div p { 
      color: #00f; 
      } 
     }

让我做的任何规则包含到我的工作页面的部分的ID。我忘了提及，我不能（据我所知）使用@namespace，因为我的页面在模板框架内（因此需要主样式表），所以如果我只是说@ @space， namespace（my-page-url）我的样式表会覆盖主样式表。

我是否缺少一些简单的东西？

澄清：

对不起，我想在我试图保持简单我太含糊...

我正在开发将被置于更加内页的内容通用模板（标头，侧边栏导航等），它具有全局样式表，我无法控制任何内容。

我对我的部分的样式表有一些自由。我不希望任何规则意外覆盖全局样式表，并且我想避免为我的规则使用非常长的选择器，以避免全局样式表覆盖我的样式表。例如，如果我想说

“的所有表有一个黑色边框”

我会让一个黑色边框周围的一些表中的侧栏。但是，如果我说

“在div＃内容中的所有表都有黑边”

这仅适用，只要他们没有更具体的规则。

现在，我可以通过每条规则，并添加一长串选择器，以确保我的每个规则都能正常工作，并且只适用于我的部分，但这并不真正有吸引力或有趣。我希望我能窝了我所有的规则内一个较大的统治，就像我上面的例子中，这样我可以有一个主要规则：

#content { 

    //and place all of my style rules inside of that: 



p { 
    border: pink; 
    }

，这样我只需要声明一次我的专一性和它涵盖了该主规则中的每个规则。

来源

2009-04-30 Anthony

什么是“模板框架”，我从来没有听说过这个术语以前使用过，它不容易被Google搜索到。 – cgp 2009-04-30 22:29:09

从我读过下面的规则符合该法案，深度仅为1级，而且是在公然最典型的网站，我见过和使用：

#content div { 
    ... your rules ... 
}

，只会影响的div这与内容的ID的元素下

有没有办法为“组”，这些规则等等。：

#content { 
    div { 
    ... your rules ... 
    } 
}

这将是很好，但唉，它不是它写的方式。

来源

2009-04-30 22:24:10 cgp

我同意避免重要规则，至少在可能的情况下。但不幸的是，我的问题仍然没有回答。我知道我可以在EVERY规则之前放置一个ID选择器。我想知道的是，如果我可以在一组规则之前放置一个id选择器，以便这些规则仅适用于这些规则，但适用于所有规则。 – Anthony 2009-04-30 22:31:34

您可以使用“！”来替换其他样式表。重要的”声明：

div { 
    border: 1px solid #000 !important; 
    } 
div p { 
    color: #00f !important; 
    }

来源

2009-04-30 22:21:49 Tyson

不是一个完美的解决方案，因为它使用基于PHP的服务器端处理，但这可能对你不够好：

http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor

来源

2009-04-30 22:47:32

一个very similar question（一个相当差的标题）被问得前一阵子。

最受欢迎的答案是Shaun Inman's server-side preprocessor（它现在已被CSSCacheer所取代）。

我的建议是Sass。

无论哪种情况，这在香草CSS中都有些不足。

来源

2009-04-30 23:31:52 Chuck

有一种方法可以使用CSS引擎来做到这一点，例如， less（node.js库）。

据lesscss“网站（和个人经验），你可以这样窝CSS规则：

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
}

并且使用命令行实用程序less编译到这个

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
}

随着less可以也有字体大小等变量，所以它使变化更快。

来源

2013-03-02 23:58:51

css选择器规则 - 选择器内的所有元素的ruleset？

回答

相关问题