Question

是否可以像使用其他背景颜色和文本颜色一样，通过助手来更改“突出显示”中的“突出显示，条带化”表类的颜色？

例如，在元素类中我可以做

class="black yellow-text"，这就是我所看到的，但是如果我将表格更改为白色文本，则突出显示的颜色将使其变得不可读。

我会动态更改颜色，因此，如果可能的话，可以通过element类中的助手进行更改。

如果没有，那么我可以在元素的样式标签中覆盖默认值吗？

谢谢

Answer 1

发布问题时最好使用代码段（最好，因为您说了“这就是我所见”）... Btw ...要在鼠标悬停时覆盖默认颜色，可以键入以下css：

table.highlight>tbody>tr:hover {
    background-color: rgba(194, 206, 23, 0.5);      /* whatever color you want */
}
table.highlight>tbody>tr {
    color: red;                                     /* whatever color you want */
}

如果将CSS放在单独的文件中，请确保使用!important关键字，否则它不会生效，因为materialecss的css将优先于我们的css。像这样：

table.highlight>tbody>tr:hover {
    background-color: rgba(194, 206, 23, 0.5) !important;
}
table.highlight>tbody>tr {
    color: red !important; <!-- you could ignore the !important here since materialize doesn't give a default color -->
}

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
    <table class="highlight">
        <thead>
          <tr>
              <th>Name</th>
              <th>Item Name</th>
              <th>Item Price</th>
          </tr>
        </thead>
    
        <tbody>
          <tr>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
        </tbody>
    </table>
</div>

也许您已经知道所有这些，也许还不知道...但是下一次，如果您想查看一个元素在悬停时的行为，可以使用开发人员控制台，方法是单击上下文菜单中的inspect来直接进行操作到您需要的元素。然后，您可以通过以下方式触发：hover选择器：

打开CSS选择器，
点击：hover
这里是：）

使用助手在“实现”表中更改表中的突出显示和条纹颜色？

1 个答案: