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

我想将CSS文件应用于页面中的具体DIV。这是页面结构：将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 { 
     ... 
    } 
    ... 
}

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

来源

2013-04-09 user1702964

可能的重复：http://stackoverflow.com/questions/12110708/limit-stylesheet-to-one-tag-and-descendents/12553605#12553605 – Pavlo 2013-04-09 12:18:16

你可以尝试：

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

等等，等等......这就是你想要的？

来源

2013-04-09 12:12:55 Arkana

是的，但该文件太大，所以我试图找到其他方法来做同样的事情。 – user1702964 2013-04-09 12:14:20

不是完美的解决方案，但是使用Notepad ++可以垂直编辑任意数量的行并应用此操作：p – Arkana 2013-04-09 12:19:18

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

入住这JSfiddle

它将样式的所有孩子和孙子，但将排除在松散的包裹在div本身和唯一的目标飞行文本（通过标签）的内容。

来源

2013-04-09 12:13:00

+12

我想知道为什么没有得到正确的答案 – 131 2014-01-25 11:56:37

辉煌，顶尖的响应。应该是这个问题的答案 – 2016-07-28 11:19:36

这只针对直接的孩子，所以它应该是：#applyCSS * – yennefer 2017-07-21 10:42:08

替代解决方案。通过

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

的applyCSS.css里面包含在HTML文件中的外部CSS：

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

来源

2013-04-09 12:16:24

这不仅适用于元素的自我，而不是它的内容？ – 2016-07-28 11:20:17

写所有的类/ 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>

来源

2013-04-09 12:20:27 Nilesh

它对我有用......谢谢 – 2013-04-09 12:25:53

这与Arkana的答案有什么不同，答案是早于7分钟提交的？ – cimmanon 2013-04-09 12:30:00

如果你正在寻找一个快捷方式写出所有你的选择器，然后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-09 12:21:30 cimmanon

我不明白为什么它不为你工作，它为我工作：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-17 08:53:49

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

此代码将应用样式里面.yourWrapperClass所有元素。

来源

2016-12-23 09:10:53

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

回答

相关问题