將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中的所有元素

回答

相關問題