Javascript Angularjs向指令添加样式（使用Css文件）_Javascript_Html_Css_Angularjs

Javascript Angularjs向指令添加样式（使用Css文件）

javascript html css angularjs

Javascript Angularjs向指令添加样式（使用Css文件）,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,我正在尝试使用一个已分离的css文件向angularjs指令添加一个样式 index-nav-bar-directive{ ul{ list-style: none; margin: 0; padding: 0; } h1{ background-color: #2980b9; color:white; margin: 0; padding: 10px 20

我正在尝试使用一个已分离的css文件向angularjs指令添加一个样式

index-nav-bar-directive{

    ul{
        list-style: none;
        margin: 0;
        padding: 0; 
    }
    h1{
        background-color: #2980b9;
        color:white;
        margin: 0;
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 24px;
        font-weight: normal;
    }

    .fa-plus{
        float: right;
    }`[![enter code here][1]][1]`
}

我的html文件是：

<body ng-app="IndexApp" ng-controller="indexController">
    <index-nav-bar-directive> </index-nav-bar-directive>
</body>

和我的指令HTML文件：

<div class="root">
        <div id="container" class="col-md-2">
            <h1> Mongo : Data Bases</h1>
            <ul id="todoList">
                <li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
                <li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
                <li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
            </ul>

        </div>
</div>


Mongo：数据库

去霍格沃兹
上药剂课
杀死伏地魔

我已经看到了答案：

但它没有成功

多谢各位

通过检查内部Css解决：假设是这样的表单（在css中，您无法像我一样访问内部属性）

你能解释一下什么是不起作用的吗，或者对你的代码做一点修改吗？我对Angular不太熟悉，但是CSS是编译出来的吗？或者是静态的？Css还没有加载，通过使用div[index nav bar directive]修复了它，它让我得到当前的div（包含类），而不是得到需要的，如果是a.fa plus（类）或h1，li

div[index-nav-bar-directive] ul{
    list-style: none;
    margin: 0;
    padding: 0;

}
 div[index-nav-bar-directive] h1{
    background-color: #2980b9;
    color:white;
    margin: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
}

div[index-nav-bar-directive] .fa-plus{
    float: right;
}

div[index-nav-bar-directive] li{    
    cursor: pointer;
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    color: #666;
}

div[index-nav-bar-directive] span{
    background-color: #e74c3c;
    height: 40px;
    margin-right:20px;
    text-align: center; 
    color: white;
    width: 0;
    display: inline-block;
    opacity: 0;
    transition: 0.2s linear;

}
 div[index-nav-bar-directive] li:hover span{
    width: 40px;
    opacity: 1.0
}
 div[index-nav-bar-directive] input{
    font-size: 18px;
    color: #2980b9;
    background-color: #f7f7f7;
    width: 100%;
    padding: 13px 13px 13px 20px;
    box-sizing: border-box;
    border: 3px solid rgba(0,0,0,0);
}

div[index-nav-bar-directive] #container{
    background-color: #f7f7f7;
    width: 360px;
    margin: 100px auto;
    box-shadow: 0px 0px 7px 1px grey;
}