Html 将 CSS 样式应用于 DIV 中的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15901522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying CSS styles to all elements inside a DIV
提问by user1702964
I would like to apply a CSS file to a concrete DIV in my page. This is the page structure:
我想将 CSS 文件应用于页面中的具体 DIV。这是页面结构：
<link rel="stylesheet" href="style.css" />
...
<body>
<div id="pagina-page" data-role="page">
...
<div id="applyCSS">
(all the elements here must follow a concrete CSS rules)
</div>
...
</body>
I tried to apply the rules of the CSS file editing it like this (the CSS file is so large):
我尝试像这样应用 CSS 文件编辑的规则（CSS 文件太大了）：
#applyCSS * { (For all the elements inside "applyCSS" DIV:)
.ui-bar-a {
...
...
}
.ui-bar-a .ui-link-inherit {
...
}
...
}
But that solution doesn't work. So, how can I do that?
但该解决方案不起作用。那么，我该怎么做呢？
采纳答案by Arkana
You could try:
你可以试试：
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
Etc, etc... Is that what you're looking for?
等等等等……这就是你要找的吗？
回答by
回答by Adem Büyük
.yourWrapperClass * {
/* your styles for ALL */
}
This code will apply styles all elements inside .yourWrapperClass.
此代码将应用 .yourWrapperClass 中的所有元素的样式。
回答by Igor Laszlo
I do not understand why it does not work for you, it works for me : http://jsfiddle.net/igorlaszlo/wcm1soma/1/
我不明白为什么它对你不起作用，它对我有用：http: //jsfiddle.net/igorlaszlo/wcm1soma/1/
The HTML
HTML
<div id="pagina-page" data-role="page">
<div id="applyCSS">
<!--all the elements here must follow a concrete CSS rules-->
<a class="ui-bar-a">This "a" element text should be red
<span class="ui-link-inherit">This span text in "a" element should be red too</span>
</a>
</div>
</div>
The CSS
CSS
#applyCSS * {color:red;display:block;margin:20px;}
Maybe you have some special rules that you did not share with us...
也许你有一些特殊的规则，你没有和我们分享......
回答by Nilesh
Write all class/id CSS as below. #applyCSSID will be parent of all CSS code.
编写所有类/id CSS，如下所示。#applyCSSID 将是所有 CSS 代码的父级。
For example you add class .ui-bar-ain CSS for applying to your div:
例如，您.ui-bar-a在 CSS 中添加类以应用于您的 div：
#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */
Below is your HTML part:
以下是您的 HTML 部分：
<div id="applyCSS">
<div class="ui-bar-a">testing</div>
</div>
回答by cimmanon
If you're looking for a shortcut for writing out all of your selectors, then a CSS Preprocessor (Sass, LESS, Stylus, etc.) can do what you're looking for. However, the generated styles must be valid CSS.
如果您正在寻找写出所有选择器的快捷方式，那么 CSS 预处理器（Sass、LESS、Stylus 等）可以满足您的需求。但是，生成的样式必须是有效的 CSS。
Sass:
萨斯：
#applyCSS {
.ui-bar-a {
color: blue;
}
.ui-bar-a .ui-link-inherit {
color: orange;
}
background: #CCC;
}
Generated CSS:
生成的 CSS：
#applyCSS {
background: #CCC;
}
#applyCSS .ui-bar-a {
color: blue;
}
#applyCSS .ui-bar-a .ui-link-inherit {
color: orange;
}
回答by RED.Skull
Alternate solution. Include your external CSS in your HTML file by
替代解决方案。通过以下方式在 HTML 文件中包含外部 CSS
<link rel="stylesheet" href="css/applyCSS.css"/>
inside the applyCSS.css:
在 applyCSS.css 中：
#applyCSS {
/** Your Style**/
}
