将CSS样式应用于DIV内的所有元素

Question

将CSS样式应用于DIV内的所有元素

66

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

但是那个解决方案行不通。那么，我该怎么做呢？

- user1702964

可能是重复问题：https://dev59.com/XmfWa4cB1Zd3GeqPjKcs#12553605 - Pavlo

7个回答

33

你可以尝试：

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

等等，等等……那就是你在寻找的东西吗？

- Arkana

4

是的，但文件太大了，所以我正在尝试寻找其他方法来完成相同的任务。 - user1702964

不是完美的解决方案，但使用Notepad ++，您可以垂直编辑任意数量的行并应用此操作:p - Arkana

27

.yourWrapperClass * {
 /* your styles for ALL */
}

这段代码将为 .yourWrapperClass 内所有元素应用样式。

- Adem Büyük

我该如何重写特定标签的样式？我尝试了 .yourWrapperClass a { /*链接样式*/} ，但仍然有* css被应用。基本上，我想定义默认的css样式，如果需要，就想覆盖特定标签的样式。 - Arun Gowda

10

我不明白为什么它对你无效，它对我有效: 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;}

也许你有一些特殊规则没有与我们分享...

- Igor Laszlo

7

如果您想要一种快捷的方式来编写所有选择器，那么 CSS 预处理器（Sass、LESS、Stylus 等）可以实现您的需求。然而，生成的样式必须是有效的 CSS。

Sass：

#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;
}

- cimmanon

5

请将所有类和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>

- Nilesh

这有什么不同于 Arkana 的答案呢？Arkana 的答案是在大约7分钟之前提交的。 - cimmanon

-1

备选方案。将外部CSS文件包含在HTML文件中，方法如下：

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

在 applyCSS.css 文件内：

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

- RED.Skull

3

这只适用于元素本身，而不是其内部内容，对吗？ - bob jomes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1467267 · Accepted Answer

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

请查看JSfiddle

它将为所有子元素和孙元素设置样式，但会排除 div 元素中松散的文本，并且只针对被标签包裹的内容进行操作。