限制div只获得特定的样式表 [英] Restrict a div to get only perticular stylesheet

问题描述

您好我正在开发一个完全由HTML5，MVC 4，CSS 3，JQuery，LINQ完成的项目。有很多ui，li和其他html控件，我们已经为这些元素完成了样式。现在我有一个情况，我必须包括一个JQ网格（http://www.trirand.com/blog/jqgrid/jqgrid.html），我们使用自己的客户端网格。现在问题是如果我在页面上使用JQ Grid的样式表，也有可能受到其他元素的影响。无论如何，我将在div元素中使用那个特定的网格我需要样式表应该受到影响，所有元素都在div内。有没有可能吗？



（我想知道这是否可行;）

 <   div     id   =  jqgridcontainer   样式 表  =  styles / jqgrid / jqstyles.cc > 此处的ui元素<   / div  >  

，我知道以这种方式不可能）





注意：编辑 http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css [ ^ ] by将jqgridcontainerdiv id添加到所有元素css是不可能的。

解决方案

在Google搜索了2个小时后，我自己找到了答案。

< div> 
< style scoped> 
 @importscoped.css; 
< / style> 
< / div> 

请在此处阅读： http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a -specific-element [ ^ ]





正如Richard Deeming建议的那样，我在这里添加了这个选项。谢谢Richard Deeming

默认情况下，这只适用于Firefox：

http://caniuse.com/#feat=style-scoped



对于所有其他浏览器，您需要一个polyfill，如链接SO线程：

https://github.com/thingsinjars/jQuery-Scoped- CSS-插件

Hi i am working on a project which is completely done by HTML5,MVC 4,CSS 3, JQuery, LINQ. There are a lot of ui,li and other html controls and we have done styles for those elements. Now i have a situation that i must include a JQ Grid (http://www.trirand.com/blog/jqgrid/jqgrid.html) , we were using our own client side grid. Now what the problem is if i use the style sheet of the JQ Grid on the page, there is a possibility to get affected to other element also. Anyway i am gonna use that perticular grid inside a div element i need that style sheet should be affected to that the elements which all are inside that div. Is there any possibilities?

(I wonder if this is possible in this way ;)

<div id="jqgridcontainer" stylesheet="styles/jqgrid/jqstyles.cc">  my ui elements here </div>

, i know its not possible in this way )


NB: editing http://www.trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css[^] by adding "jqgridcontainer" div id to all the element css is not possible.

解决方案

I have found the answer myself , after 2 hours of search in Google.

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

Read here : http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element[^]


As Richard Deeming suggested, I am adding that option here. Thank you Richard Deeming
By default, that only works in Firefox:
http://caniuse.com/#feat=style-scoped

For all other browsers, you'll need a polyfill, as mentioned in the linked SO thread:
https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

这篇关于限制div只获得特定的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！