我想将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>
我试图应用CSS文件的规则来编辑它(CSS文件太大了):
#applyCSS * { (For all the elements inside "applyCSS" DIV:)
.ui-bar-a {
...
...
}
.ui-bar-a .ui-link-inherit {
...
}
...
}
但该解决方案不起作用.那么,我该怎么做呢？
小智 117
#applyCSS > * {
/* Your style */
}
检查这个JSfiddle
它会为所有的孩子和孙子们设置样式,但是会在div中排除松散的文本,并且只包含目标包装(通过标签)内容.
Ark*_*ana 26
你可以尝试:
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
等等......这就是你要找的东西吗？
小智 13
.yourWrapperClass * {
/* your styles for ALL */
}
此代码将应用样式.yourWrapperClass中的所有元素.
我不明白为什么它不适合你,它对我有用:http://jsfiddle.net/igorlaszlo/wcm1soma/1/
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>
CSS
#applyCSS * {color:red;display:block;margin:20px;}
也许你有一些你没有与我们分享的特殊规则......
写下所有class/id CSS,如下所示.#applyCSSID将是所有CSS代码的父代.
例如,您.ui-bar-a在CSS中添加类以应用于您的div:
#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */
以下是您的HTML部分:
<div id="applyCSS">
<div class="ui-bar-a">testing</div>
</div>
如果您正在寻找写出所有选择器的快捷方式,那么CSS预处理器(Sass,LESS,Stylus等)可以满足您的需求.但是,生成的样式必须是有效的CSS.
萨斯:
#applyCSS {
.ui-bar-a {
color: blue;
}
.ui-bar-a .ui-link-inherit {
color: orange;
}
background: #CCC;
}
生成的CSS:
#applyCSS {
background: #CCC;
}
#applyCSS .ui-bar-a {
color: blue;
}
#applyCSS .ui-bar-a .ui-link-inherit {
color: orange;
}
| 归档时间： |
|
| 查看次数： |
138954 次 |
| 最近记录： |