【问题标题】:Applying CSS styles to all elements inside a DIV将 CSS 样式应用于 DIV 内的所有元素
【发布时间】:2013-03-31 20:36:10
【问题描述】:

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

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

【问题讨论】:

标签: html css


【解决方案1】:
#applyCSS > * {
  /* Your style */
}

查看JSfiddle

它将为所有子孙设置样式,但会排除 div 本身中松散飘扬的文本,并且只针对包装(按标签)内容。

【讨论】:

  • 出色、一流的响应。应该是这个问题的答案
  • 这只针对直接子级,所以应该是:#applyCSS *
  • @yennefer 甚至 #applyCSS * 都不适用于我的孙子孙女。 @Arkana 的回答对我有用
  • #applyCSS > h3 { 颜色:红色;当我只想为 h3 标签着色时,这不起作用@Nisse Engström
【解决方案2】:

你可以试试:

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

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

【讨论】:

  • 是的,但是文件太大,所以我试图找到其他方法来做同样的事情。
  • 不是完美的解决方案,但使用 Notepad++,您可以垂直编辑任意数量的行并应用它:p
【解决方案3】:
.yourWrapperClass * {
 /* your styles for ALL */
}

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

【讨论】:

    【解决方案4】:

    我不明白为什么它不适合你,它适合我: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;}
    

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

    【讨论】:

      【解决方案5】:

      如果您正在寻找写出所有选择器的快捷方式,那么 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;
      }
      

      【讨论】:

        【解决方案6】:

        如下所示编写所有类/id CSS。 #applyCSS ID 将是所有 CSS 代码的父级。

        例如,您在 CSS 中添加类 .ui-bar-a 以应用于您的 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>
        

        【讨论】:

        • 这与大约 7 分钟前提交的 Arkana 的答案有何不同?
        【解决方案7】:

        替代解决方案。通过

        在您的 HTML 文件中包含您的外部 CSS
        <link rel="stylesheet" href="css/applyCSS.css"/> 
        

        applyCSS.css 内:

           #applyCSS {
              /** Your Style**/
            }
        

        【讨论】:

        • 这不只适用于元素本身而不适用于其中的内容吗?
        猜你喜欢
        • 2011-09-26
        • 2010-10-12
        • 2017-02-16
        • 2014-12-08
        • 1970-01-01
        • 2013-10-28
        • 1970-01-01
        • 2010-12-22
        相关资源
        最近更新 更多