html - 仅为特定 Div 链接外部 CSS 文件

标签 html css

<分区>

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

我有 3 个外部 CSS 文件

main.css
bootstrap.css
style.css

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

我如何链接 style.css归档到<div class="leftmenu">

样式.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>

最佳答案

简短的回答:没有。

其他想法:

使用 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 中。

就是这样。

关于html - 仅为特定 Div 链接外部 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26263616/

相关文章:

javascript - Jquery 隐藏多个div onclick

html - 滚动时页面顶部出现白条

javascript - 防止元素更新 - JQuery

html - Bootstrap 最大 2 列 div 彼此相邻

javascript - JQ:dotdotdot::Expand parent (height) with floating child

html - 无法在 css 中缩放图像

html - 如何在 CSS 中对齐 div 树中的图像和 url?

html - 为什么 erb 模板中的字符串插值失败?

css - 使用 CSS 根据原始大小调整图像大小

javascript - 为什么我的 Accordion 打不开