我尝试使用 AngularJS 和 Bootstrap 显示一些员工，但我无法覆盖/更改我创建的 Bootstrap 列的 CSS(在每个员工周围添加阴影)。
我认为这与 CSS 特性有关，但我不知道是什么。
索引.html
<body data-ng-cloak="">
<div class="webpage">
<!-- Here is a banner with navigation -->
<div ng-view class="content"></div>
</div>
</body>
AngularJS 部分:
<link href="styles/booking.css" rel="stylesheet"/>
<div>
<div class="row search">
<div class="col-md-2">
<!--Sidebar content-->
Search by name: <input ng-model="query">
</div>
</div>
<div class="row">
<div class="col-md-4 employee" ng-repeat="employee in employees | filter:{name:query}" ng-click="onClickEmployee($index)">
{{employee.name | uppercase}}
<p>{{employee.quote}}</p>
</div>
</div>
</div>
预订.css
.webpage .content .ng-scope .row .col-md-4 .employee {
box-shadow: 0 0 5px #000;
}
最佳答案
试试 ng-class。添加一些 bool 值，该值将包含有关是触发添加类还是从元素中删除类的信息(例如通过 ng-click 或 ng-mouseover)。关于 ng-class 的更多信息:https://docs.angularjs.org/api/ng/directive/ngClass .
如果只有 css 有问题，请尝试 !important。
.webpage .content .ng-scope .row .col-md-4 .employee {
box-shadow: 0 0 5px #000 !important;
}
编辑:
我看到您在 .col-md-4 和 .employee 之间添加了空格。
.webpage .content .ng-scope .row .col-md-4.employee {
box-shadow: 0 0 5px #000;
}
关于css - 更改 AngularJS 创建的 Bootstrap-Columns 的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29635220/