使用at-rules,可以在那个at-rule事件(如打印、移动设备等)期间为元素设置规则集。但是,对于特定的选择器呢?
我正在制作一个大型网站的子页面,并且必须使用主样式表中的任何页面。有时,样式规则被主样式表中的规则所覆盖。为了克服这个问题,我不得不在所有规则之前添加“#mypage #content blah blah”,以确保我的CSS更加具体。很快就会变得混乱。我更喜欢做的事情是:
所以我制定的任何规则都仅适用于我正在处理的页面部分的id。哦,我忘了提到,据我所知,我无法使用@namespace,因为我的页面在模板框架内(这就是需要主样式表的原因),因此如果我只说@namespace(my-page-url),我的样式表将覆盖主样式表。我有遗漏简单的东西吗?
澄清:抱歉,我想在保持简单的同时过于含糊了... 我正在开发一个页面的内容,该页面将放置在更通用的模板中(标头、侧边栏导航等),该模板具有全局样式表,我对其中任何内容都没有控制权。我可以自由地使用仅针对我的部分的样式表。我不希望我的任何规则意外覆盖全局样式表,并且我希望避免为我的规则添加非常长的选择器,以避免全局样式表覆盖我的样式表。例如,如果我想说“所有表格都有黑色边框”,我会冒着在侧边栏中的某个表格周围放置黑色边框的风险。但是,如果我说“div #content内的所有表格都有黑色边框”,只要它们没有更具体的规则,这就可以起作用。现在,我可以逐个规则地添加一长串选择器,以确保我的每个规则都有效,并且仅适用于我的部分,但这并不是很吸引人或有趣的事情。我希望我可以将所有规则嵌套在一个更大的规则内,就像我上面的例子一样,这样我就可以拥有一个主要规则:
我正在制作一个大型网站的子页面,并且必须使用主样式表中的任何页面。有时,样式规则被主样式表中的规则所覆盖。为了克服这个问题,我不得不在所有规则之前添加“#mypage #content blah blah”,以确保我的CSS更加具体。很快就会变得混乱。我更喜欢做的事情是:
@#mypage {
div {
border: 1px solid #000;
}
div p {
color: #00f;
}
}
所以我制定的任何规则都仅适用于我正在处理的页面部分的id。哦,我忘了提到,据我所知,我无法使用@namespace,因为我的页面在模板框架内(这就是需要主样式表的原因),因此如果我只说@namespace(my-page-url),我的样式表将覆盖主样式表。我有遗漏简单的东西吗?
澄清:抱歉,我想在保持简单的同时过于含糊了... 我正在开发一个页面的内容,该页面将放置在更通用的模板中(标头、侧边栏导航等),该模板具有全局样式表,我对其中任何内容都没有控制权。我可以自由地使用仅针对我的部分的样式表。我不希望我的任何规则意外覆盖全局样式表,并且我希望避免为我的规则添加非常长的选择器,以避免全局样式表覆盖我的样式表。例如,如果我想说“所有表格都有黑色边框”,我会冒着在侧边栏中的某个表格周围放置黑色边框的风险。但是,如果我说“div #content内的所有表格都有黑色边框”,只要它们没有更具体的规则,这就可以起作用。现在,我可以逐个规则地添加一长串选择器,以确保我的每个规则都有效,并且仅适用于我的部分,但这并不是很吸引人或有趣的事情。我希望我可以将所有规则嵌套在一个更大的规则内,就像我上面的例子一样,这样我就可以拥有一个主要规则:
#content {
//and place all of my style rules inside of that:
p {
border: pink;
}
这样我只需要声明一次我的特异性,它就可以涵盖主要规则内的每个规则。