Question

tr:first-child {background: green }
tr {background: blue  }
tr:nth-child(even) { background-color: red}

我得到了这个，所以一张桌子有不同颜色的行，偶数是蓝色，奇数是红色。

现在我有了选择部分：

.selected {
    background-color:black;
    color:white;
}

在我的桌子上是问题所在，一旦我按下红色部分，没有任何反应，除了文字颜色的改变......但是当我按下蓝色部分时，一切正常......

有什么建议吗？

这是我的整个HTML：

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<head>
<link rel="stylesheet" type="text/css" href="CSS/selected.css" />
</head>

<body ng-app="appStud">

<div ng-controller="ctrlStud">

    <h2>Students</h2>
    <form>
        <p>ID</p>
        <input ng-model="student.id">
        <p>Name</p>
        <input ng-model="student.firstname">
        <p>Last Name</p>
        <input ng-model="student.lastname">

        <p>From</p>
        <select ng-model="student.mestorodjenja.ime" ng-options="x for x in names"> </select> <br> <br>


        <button ng-click="addStudent(student)">Add Student</button>
        <button ng-click="editStudent(student)">Save Student</button>
        <button ng-click="deleteStudent(student)">Delete Student</button>
        <br> <br>



    </form>
    <button ng-click="reloadRoute()">Refresh</button>
    <button ng-disabled="result.length>0" ng-click="initTables()">Init Tables</button>

    <table border=1 name="tableStud" arrow-selector>
        <tbody>
            <tr>

                <td>ID</td>
                <td>First Name</td>
                <td>Last Name</td>
                <td>From</td>
            </tr>

            <tr ng-repeat="student in result"
                ng-class="{'selected':$index == selectedRow}"
                ng-click="setSelected(student,$index)">
                <td>{{ student.id }}</td>
                <td>{{ student.firstname }}</td>
                <td>{{ student.lastname }}</td>
                <td>{{ student.mestorodjenja.ime }}</td>

            </tr>

        </tbody>
    </table>

</div>

<br>
<br>
<a href="http://localhost:8080/CreditCardWEB/indexNaseljenoMesto.html">NaseljenaMesta</a>
<br>
<br>
<a href="http://localhost:8080/CreditCardWEB">Back</a>
<br>

<script src="app/app.js"></script>
<script src="app/controllers.js"></script>

</body>
</html>

Answer 1

不确定你在这里尝试做什么。但我假设它是，

1）当用户将鼠标悬停在一行上时尝试更改背景颜色。

2）或者当用户点击一行时，会应用.selected类。

如果您选择1，那么您可以使用css pseudo：hover

如果是2号，那么当用户点击时你需要使用javascript来改变类。

Answer 2

您应该引用class名称，就像引用:nth-child选择器一样。

将.selected更改为tr.selected，其工作正常，请查看示例：

tr:first-child {background: green }
tr {background: blue  }
tr:nth-child(even) { background-color: red}

tr.selected {
    background-color:black;
    color:white;
}

<table>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr class="selected">
  <td>1</td>
  <td>2</td>
</tr>
</table>

<强> Fiddle demo

Answer 3

解决方案是.select部分应该在tr：nth-child部分之后

然后所有的作品都应该是!!

当用不同颜色选择时，CSS绘制表格行（2色表）

3 个答案: