仅为特定 Div 链接外部 CSS 文件 [重复]答案

【问题标题】：Link external CSS file only for specific Div [duplicate]仅为特定 Div 链接外部 CSS 文件 [重复]
【发布时间】：2014-10-08 18:12:13
【问题描述】：

我需要为特定的 DIV 链接外部 CSS 文件

我有 3 个外部 CSS 文件

main.css
bootstrap.css
style.css

我需要将 style.cssfile 链接到特定的 div <div class="leftmenu"> 我如何链接到那个 div

如何将style.css 文件链接到<div class="leftmenu">

style.css

ul
{
margin:0px;
padding:0px;
list-style-type:none;
-webkit-backface-visibility: hidden; backface-visibility: hidden;  
}
.var_nav
{
position:relative;
background:#ccc; 
width:300px;
height:70px;
margin-bottom:5px;
}
.link_bg
{
width:70px;
height:70px;
position:absolute;
background:#E01B6A;
color:#fff;
z-index:2;
}
.link_bg i
{
    position:relative;
}
.link_title
{
position:absolute;
width:100%;
z-index:3;
color:#fff;
}
.link_title:hover .icon
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);  
}
.var_nav:hover .link_bg
{
width:100%;
background:#E01B6A;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
}
.var_nav:hover a
{
font-weight:bold;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;  
}
.icon
{
position:relative;
width:70px;
height:70px;
text-align:center;
color:#fff;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out; 
-o-transition:all .5s ease-in-out; 
-ms-transition:all .5s ease-in-out;   
float:left;
transition:all .5s ease-in-out;   
float:left;  
}
.icon i{top:22px;position:relative;}
a{
display:block;
position:absolute;
float:left;
font-family:arial;
color:#fff;
text-decoration:none;
width:100%;
height:70px;
text-align:center;
}
span
{
margin-top:25px;
display:block;
}

我已经检查了以下链接example，但它很少知道有人可以帮助我如何将 css 文件链接到 div

<head>
<link href="../fonticon/flaticon.css" rel="stylesheet">
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
</head>

【问题讨论】：

@webeno 我需要将文件链接到一个特定的 div
如何在您有<div class="leftmenu"> 的文件中调用style.css？您可以将head 的那部分粘贴到您原来的问题中吗？
@webeno 检查我添加的问题并阅读我的问题我需要将整个 CSS 文件链接到整个页面中的一个 div
从这个文件夹结构中，我假设你的style.css 文件与你有这个head 的文件在同一个文件夹中，对吗？
没有办法“将 css 文件链接到特定的 div”。您可以使用选择器使 style.css 中的 css 仅适用于某个 div，但如上所述，您的问题没有任何意义。

标签： html css

【解决方案1】：

简短回答：不。

其他想法：

使用 CSS 预处理器

.leftmenu {
    @include 'style.css';
}

这使用 CSS 预处理器的嵌套功能来预限定 style.css 中的所有规则。将 @include 替换为您最喜欢的预处理器指令，以引入另一个 CSS 文件。

手动重写 CSS

您可以“命名空间”style.css 中的规则，方法是将所有选择器更改为前面有一个合格的.leftmenu。

自动重写 CSS

您可以编写 JS 代码在运行时重写样式表选择器，以在选择器前面加上类名，这基本上就是这个插件所做的：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin。或者你可以在服务器上进行这种重写，无论它是用什么语言编写的。

使用`IFRAME` 作为沙盒

如果您想要应用样式的事物的内容可以放在 iframe 中，您可以将 style.css 框架添加到 iframe 中加载的 HTML。

就是这样。

【讨论】：

是的，这些是使用外部 CSS 进行样式设置的特定 div/ 部分的最佳选择。我使用 CSS Preprocessor(SASS) 重写 CSS 并包含在我现有的项目中。

使用 CSS 预处理器

手动重写 CSS

自动重写 CSS

使用IFRAME 作为沙盒

使用`IFRAME` 作为沙盒