Fatal编程技术网
  • css/
  • CSS在选择不同颜色时绘制表格行（2种颜色的表格）

CSS在选择不同颜色时绘制表格行（2种颜色的表格）

css colors

CSS在选择不同颜色时绘制表格行（2种颜色的表格）,css,colors,html-table,Css,Colors,Html Table,我得到了这个，一张有不同颜色行的桌子，偶数是蓝色，奇数是红色 现在我有了选择部分： tr:first-child {background: green } tr {background: blue } tr:nth-child(even) { background-color: red} 在我的表格中有一个问题，当我按下红色部分时，除了文本颜色的变化外，什么都没有发生……但是当我按下蓝色部分时，一切都正常 有什么建议吗 以下是我的全部html： .selected { backgro

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

现在我有了选择部分：

tr:first-child {background: green }
tr {background: blue  }
tr:nth-child(even) { background-color: red}
在我的表格中有一个问题，当我按下红色部分时，除了文本颜色的变化外，什么都没有发生……但是当我按下蓝色部分时，一切都正常

有什么建议吗

以下是我的全部html：

.selected {
    background-color:black;
    color:white;
}
不知道你到底想在这里做什么但我想

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

2或当用户单击某一行时，将应用选定的类

如果你选择1，那么你可以使用css伪：hover

如果是2，那么当用户单击时，您需要使用javascript来更改类

您应该引用类名，就像引用第n个子选择器一样

将.selected更改为tr.selected，其工作正常，请参见以下示例：

tr:第一个孩子{背景：绿色} tr{背景：蓝色} tr:nth child偶数{背景色：红色} 选定{ 背景色：黑色； 颜色：白色； } 1. 2. 1. 2. 1. 2. 1. 2.
解决方案是.select部分应该放在tr:n子部分之后

然后所有的工作就像是应该的

原因可能有很多。这些代码是不够的。共享表格的HTML和添加选定类的JavaScript。单击/按可添加HTML。如果添加，会发生什么情况！重要信息，例如背景颜色：黑色！重要的你需要发布比这更多的细节，任何人都可以帮助你。这里你从htmlsolved得到了代码！thx to zeev Katz第二部分对我来说是相关的…你能再解释一下吗？我把它改为tr.selected…它仍然和以前一样…蓝色的有效，但红色的无效…我还将class=selected添加到我的表中…检查我的示例，它的有效性。没有理由它不能在你的浏览器上运行。也许你在：n子选择器之前编写tr.selected选择器？当我运行你的代码时，从一开始，所有蓝色的都被选中，r黑色，文本是白色的，但红色的r仍然是红色，但文本是白色的……兄弟，你解决了它，不是在之前，但是在tr:n子选择器之后 
<!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>