【发布时间】：2019-08-20 11:44:26
【问题描述】：
如何更改ngx-pagination CSS？我试过了：
:host /deep/ .ngx-pagination {
padding-left: 0px;
}
:host /deep/.ngx-pagination .current,
.btn-info {
background: #17a2b8 !important;
border: transparent;
border-radius: 20px;
}
:host /deep/.ngx-pagination .current:hover {
background: #17a2b8 !important;
border-radius: 20px;
border: transparent;
}
在组件 .css 中，但没有任何改变，我收到此警告
[弃用] /deep/ 组合器不再在 CSS 动态配置文件中得到支持。它现在实际上是无操作的，就好像它是一个后代组合器一样。 /deep/ 组合器将被移除，并且在 M65 时无效。你应该删除它。详情请见https://www.chromestatus.com/features/4964279606312960。
我该如何解决这个问题？感谢您的宝贵时间！
编辑：
.html
<div class="clearfix">
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
.css
.clearfix {
position: relative;
right: 35%;
left: 35%;
font-size: 14px;
}
编辑2：（渲染后的html）
<div class="clearfix">
<pagination-controls nextlabel="Next" previouslabel="Previous" ng-reflect-previous-label="Previous"
ng-reflect-next-label="Next">
<pagination-template ng-reflect-max-size="7">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ul class="ngx-pagination ng-star-inserted" role="navigation" aria-label="Pagination">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<li class="pagination-previous disabled ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<!--bindings={
"ng-reflect-ng-if": "true"
}--><span class="ng-star-inserted"> Previous <span class="show-for-sr">page</span></span></li>
<li class="small-screen"> 1 / 93 </li>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<li class="current ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<!----><span class="show-for-sr ng-star-inserted">You're on page </span><span class="ng-star-inserted">1</span></li>
<li class="ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>2</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<li class="ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>3</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<li class="ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>4</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<li class="ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>5</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<li class="ellipsis ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>...</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<li class="ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" class="ng-star-inserted"><span class="show-for-sr">page
</span><span>93</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<li class="pagination-next ng-star-inserted">
<!--bindings={
"ng-reflect-ng-if": "true"
}--><a tabindex="0" aria-label="Next page" class="ng-star-inserted">
Next <span class="show-for-sr">page</span></a>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</li>
</ul>
</pagination-template>
</pagination-controls>
</div>
【问题讨论】：
-
如果你能把你的html代码贴在这里就好了，这样我们就可以给你更明确的答案，现在试试下面的答案
-
我添加了它。我的组件中已经有
encapsulation: ViewEncapsulation.None,了，并且 !important 对所有内容都不起作用。 -
你能在渲染之后通过检查元素来发布 html 代码
-
我也加了
-
我删除了
encapsulation: ViewEncapsulation.None,，它起作用了...
标签： html angular angular6 ngx-pagination