56

我想将 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 {
       ...
    }
    ...
}

但该解决方案不起作用。那么，我该怎么做呢？

4

7 回答 7

150 
#applyCSS > * {
  /* Your style */
}

检查这个JSfiddle

它将为所有子孙设置样式，但会排除 div 本身中松散的飞行文本，并且仅针对包装（按标签）内容。

于 2013-04-09T12:13:00.813 回答
31

你可以试试：

#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}

等等等等……这就是你要找的吗？

于 2013-04-09T12:12:55.550 回答
23 
.yourWrapperClass * {
 /* your styles for ALL */
}

此代码将应用样式 .yourWrapperClass 中的所有元素。

于 2016-12-23T09:10:53.720 回答
9

我不明白为什么它对你不起作用，它对我有用：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;}

也许您有一些特殊的规则没有与我们分享……

于 2015-01-17T08:53:49.623 回答
6

如果您正在寻找写出所有选择器的快捷方式，那么 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;
}
于 2013-04-09T12:21:30.270 回答
5

如下编写所有类/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>
于 2013-04-09T12:20:27.860 回答
0

替代解决方案。在您的 HTML 文件中包含您的外部 CSS

<link rel="stylesheet" href="css/applyCSS.css"/>

在 applyCSS.css 中：

   #applyCSS {
      /** Your Style**/
    }
于 2013-04-09T12:16:24.180 回答