所以我在使用angular-datatable 18.0.0，问题是我想移除dt分页按钮的悬停效果

<div class="layout-container">
    <div class="text-end">
        <button class="btn btn-primary table-add-btn">+ Add</button>
    </div>
    <div>
        <table datatable [dtOptions]="dtOptions" class="table" style="width: 100%" id="List">
            <tbody></tbody>
        </table>
    </div>
</div>

this.dtOptions = {
      pagingType: 'simple_numbers',
      searching:true,
      ordering: false,
      language:{
        search: '',
        searchPlaceholder: 'Search by Date, Added by, Main Concern',
        paginate: {
          previous: '<i class="bi bi-chevron-double-left"></i> Previous',
          next: 'Next <i class="bi bi-chevron-double-right"></i>',
        },
      },
      dom: 'ft<"bottom-wrapper"ip>',
      ajax: (dataTablesParameters: any, callback) => {
        this.suppliersService.getSuppliersList().subscribe(resp => {
          callback({
            data: resp
          });
        });
      },
      lengthMenu: [5, 10, 20, 50],
      columns: [
        { title: 'ID', data: 'id' },
        { title: 'Name', data: 'name' },
        { title: 'Contact Number', data: 'contactNumber' },
        {
          title: 'Actions',
          data: null,
          orderable: false,
          searchable: false,
          className: 'text-center action-column',
          render: (data: any, type: any, row: any) => {
            let view = `<button class="btn table-icon">
                 <i class="bi bi-eye"></i>
                </button>`;

            let edit = `<button class="btn table-icon">
                 <i class="bi bi-pencil"></i>
                </button>`;

            let del = `<button class="btn table-icon">
                <i class="bi bi-trash"></i>
               </button>`;

            return `<div class="d-flex justify-content-center">` + view + edit + del + `</div>`;
          },
        }
      ],

div.dt-container .dt-paging .dt-paging-button:hover {
  background-color: transparent !important;
  background: transparent !important;
  color: #000000 !important;
}

我已经尝试把这段CSS放在全局中，它改变了悬停效果，但颜色仍然是白色，导致数字看不见，请问有没有办法把颜色改为黑色？

解决方案

问题在于，原始样式中，颜色也包含 !important，因此你需要让CSS选择器更具体。

你可以通过加入“你组件的选择器”来让它更具体，例如

[my-component] div.dt-container .dt-paging .dt-paging-button:hover {
  background-color: transparent;
  background: transparent;
  color: #000000 !important;
}

或者甚至app-root

[app-root] div.dt-container .dt-paging .dt-paging-button:hover {
  background-color: transparent;
  background: transparent;
  color: #000000 !important;
}

请注意不要在颜色上使用 !important——说实话，没有人应该使用 !important。