logo标签列表

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

htmlcss
20

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

我有3个外部CSS文件。

main.css
bootstrap.css
style.css

我需要将 style.css 文件链接到特定的 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;
}

我已经查看了下面的链接示例，但有点难以理解。请问有人可以帮我了解如何将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。 - sanoj lawrence
你在哪个文件中有 <div class="leftmenu">，如何调用 style.css？你能把你的 head 的那一部分粘贴到原问题中吗？ - benomatis
从这个文件夹结构来看，我假设你的style.css文件和你的head标签所在的文件在同一个文件夹里，对吗？ - benomatis
2
没有办法“将CSS文件链接到特定的div”。您可以使用选择器使style.css中的CSS仅适用于某个特定的div，但是您所提出的问题毫无意义。 - i alarmed alien
请不要发布大量无关的CSS。 - user663031
显示剩余3条评论
1个回答
34

简短回答：不行。

其他想法：

使用CSS预处理器

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

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

手动重写CSS

您可以通过更改所有选择器前面加上限定符.leftmenu来“命名空间”style.css中的规则。

自动重写CSS

您可以编写JS代码，在运行时重写样式表选择器，以前缀形式添加类名，这本质上就是此插件所做的事情：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin。或者您可以在服务器上进行此重写，无论使用哪种语言都可以。

使用IFRAME作为沙盒

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

就是这样。

是的，这些是针对特定div/section进行外部CSS样式设计的最佳选项。我使用CSS预处理器（SASS）来重写CSS并将其包含在我的现有项目中。 - Azhar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接