简体   繁体   English

如何在文档主体中仅针对div制作CSS样式

[英]How to make css styles in the document body only specific to a div

On a basic level, we have: 在基本层面上,我们有:

<html>
   <head>
   </head>
   <body>
      <div id="Template"></div>
      <div id="Content">
         <style>h1... h2....</style>
         <h1></h1><p></p>.... (Content)
      </div>
   </body>
</html>

How do i get the style tag within 'Content', to only apply to the Content div, and not the whole page, but I can't alter the content of the style tag (ie adding #Content before each declaration wont work) 我如何在“内容”中获取样式标签,使其仅适用于Content div,而不适用于整个页面,但是我无法更改样式标签的内容(即,在每个声明之前添加#Content无效)

We're pulling content in from Google Docs, and want to use their stylesheet on the document to style the content, without destroying the template around the document. 我们正在从Google文档中提取内容,并希望在文档中使用其样式表来设置内容的样式,而不会破坏文档周围的模板。

So far - iFrame seems like the only option, I just don't want the container to be fixed height... 到目前为止-iFrame似乎是唯一的选择,我只是不希望容器固定在高度上...

也许您可以使模板的样式规则比Google规则更具体,以便模板始终使用您的规则,而不使用Google的规则。

You can use jQuery to resize the iframe if it's less of a headache for you: 如果您不太担心,可以使用jQuery调整iframe大小:

http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html http://www.phinesolutions.com/use-jquery-to-adjust-the-if​​rame-height.html

Does the importance rule solve this? 重要性规则可以解决这个问题吗? http://webdesign.about.com/od/css/f/blcssfaqimportn.htm http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

style tags should only be in the head section. 样式标签仅位于头部。

To get the styles within it to only apply to stuff in the "Content" tag, prefix your selectors with: 要使其中的样式仅适用于“ Content”标签中的内容,请在选择器之前添加以下内容:

#Content h1{
  /*only styles for h1 tags inside the Content element*/
}
#Content p{
  /*only styles for p tags inside the Content element*/
}

PS although the style tag should be in the head, most browsers will let you place them anywhere. PS虽然样式标签应该放在头部,但是大多数浏览器都可以将它们放置在任何地方。 The advantage to putting it in the head is that it can be parsed and be ready to apply before you render any DOM elements that might match it... thus avoid the "FOUC" (Flash Of Unstyled Content) 将其放在首位的优点是可以在呈现任何可能与之匹配的DOM元素之前对其进行解析并准备应用...因此避免了“ FOUC”(未样式化内容的闪烁)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM