无法将CSS样式应用于列表内

Question

所以我在这里有一个很有趣的问题。 我认为这只是我不知道的东西，或者某个地方存在错误/逻辑问题。 总之，长话短说，我有一个带有百里香产生的清单的html代码。 想法是在每个列表元素后面隐藏一个复选框按钮，这使其成为可选择对象，因此为我提供了一种快速简便的方法来处理数据Java方面。

无论如何，我的问题是选择器元素的样式。

我试图在单击时更改指针/颜色。 我将类添加到css文件中使用的一个span元素中，如下所示。 我尝试了许多不同的方法，但没有一种方法将其应用于CSS中的任何span元素。 但是，如果我只是在html的span元素内添加样式，则效果很好。 所以我的问题是，为什么它不能与CSS一起使用，可能是什么原因？ 还是仅仅是我不了解或可能忽略了的事情？

您可以在下面找到代码。 任何帮助深表感谢！

有问题的是

  .minionInputData { width: 100%; text-align: center; margin-top: 3cm; } .minionInputs p { display: inline-block; float: top; margin-left: 2cm; } .minionContent { width: 100%; text-align: center; margin-bottom: 1cm; } .minionInputs { margin-bottom: 2cm; } .rolesTableContainer { width: 100%; text-align: center; } .roles-table input[type=checkbox] { vertical-align: middle; position: relative; bottom: 1px; } .rolesText { cursor: pointer; color: red; display: block; padding: 10px; margin: 3px; } .roles-table input[type="checkbox"]:checked+span { color: #ffffff; font-weight: bold; background: blue; } .argsTableContainer { width: 100%; text-align: center; } .arguments-table { /*margin: 0 0 0 auto;*/ display: inline-block; width: 40%; border: 3px solid green; padding: 10px; overflow:hidden; } .arguments { width: 100%; } .arguments table { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; } .arguments td { padding: 8px; border-style:outset; background-color: #4CAF50; height: 100%; } .arguments td input{ border: 0; box-shadow: none; width:100%; height:40px; font-size:26px; white-space:nowrap; background-color: #4CAF50; text-align: center; } .arguments tr:nth-child(even){ background-color: #ffffcc; } .arguments tr:hover { background-color: #ddd; } .addrowbutton { float: right; top: 200px; } /*.addallarguments { background: #ff0000; background-image: -webkit-linear-gradient(top, #ff0000, #3f219e); background-image: -moz-linear-gradient(top, #ff0000, #3f219e); background-image: -ms-linear-gradient(top, #ff0000, #3f219e); background-image: -o-linear-gradient(top, #ff0000, #3f219e); background-image: linear-gradient(to bottom, #ff0000, #3f219e); -webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px; text-shadow: 1px 1px 3px #666666; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .addallarguments:hover { background: #311ebd; background-image: -webkit-linear-gradient(top, #311ebd, #3498db); background-image: -moz-linear-gradient(top, #311ebd, #3498db); background-image: -ms-linear-gradient(top, #311ebd, #3498db); background-image: -o-linear-gradient(top, #311ebd, #3498db); background-image: linear-gradient(to bottom, #311ebd, #3498db); text-decoration: none; } .confirmButtons{ text-align: center; width:100%; bottom:0; }*/ .confirmButtons input{ -moz-box-shadow: 1px 2px 5px 0px #899599; -webkit-box-shadow: 1px 2px 5px 0px #899599; box-shadow: 1px 2px 5px 0px #899599; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #a1a1a1)); background:-moz-linear-gradient(top, #ededed 5%, #a1a1a1 100%); background:-webkit-linear-gradient(top, #ededed 5%, #a1a1a1 100%); background:-o-linear-gradient(top, #ededed 5%, #a1a1a1 100%); background:-ms-linear-gradient(top, #ededed 5%, #a1a1a1 100%); background:linear-gradient(to bottom, #ededed 5%, #a1a1a1 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#a1a1a1',GradientType=0); background-color:#ededed; -moz-border-radius:13px; -webkit-border-radius:13px; border-radius:13px; display:inline-block; cursor:pointer; color:#121212; font-family:Verdana; font-size:16px; font-weight:bold; padding:16px 25px; text-decoration:none; text-shadow:0px 0px 0px #e1e2ed; } .confirmButtons input:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a1a1a1), color-stop(1, #ededed)); background:-moz-linear-gradient(top, #a1a1a1 5%, #ededed 100%); background:-webkit-linear-gradient(top, #a1a1a1 5%, #ededed 100%); background:-o-linear-gradient(top, #a1a1a1 5%, #ededed 100%); background:-ms-linear-gradient(top, #a1a1a1 5%, #ededed 100%); background:linear-gradient(to bottom, #a1a1a1 5%, #ededed 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a1a1', endColorstr='#ededed',GradientType=0); background-color:#a1a1a1; } .confirmButtons input:active { position:relative; top:1px; } 

 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title>Minions configurations</title> <h1 align="center">Minion configuration</h1> </head> <body background="../static/images/MainBackground.jpg" th:background="@{images/MainBackground.jpg}"> <div id="allRolesContent"> <form action="#" th:action="@{/minions}" th:object="${selectedRole}" method="post"> <select id="allRoles" th:field="*{roleName}"> <option th:each="roleObj : ${allMinionRoles}" th:value="${roleObj.getRoleName()}" th:text="${roleObj.getRoleName()}">ROLES </option> </select> <p><input type="submit" name="addRole" value="Add Formula" /></p> </form> </div> <div id="minionForm" class="minionForm"> <link rel="stylesheet" type="text/css" href="../static/css/minions.css" th:href="@{css/minions.css}"/> <script src="../static/js/buttons.js" th:src="@{js/buttons.js}"></script> <script src="../static/js/PageFunctions" th:src="@{js/PageFunctions}"></script> <div id="minionContent" class="minionContent"> <form action="#" th:action="@{/minions}" th:object="${minions}" method="post"> <div id="minionInputs" class="minionInputs"> <p>Configuration Name: <input type="text" th:field="*{name}" th:required="required"/></p> <p>Enironment(eg LABOR): <input type="text" th:field="*{env}" th:required="required"/></p> </div> <div class="rolesTableContainer"> <div class="roles-table"> <ul> <li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"> <label th:field="*{roleName}" th:value="${role.getRoleName()}"> <span class="rolesText" th:text="test">ROLE</span> <input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/> </label> </li> </ul> <input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/> <button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button> <button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button> </div> </div> <div class="argsTableContainer"> <div class="arguments-table"> <table id="argsTable" class="arguments"> <h1 align="center">Arguments list</h1> <input class="addrowbutton" type="submit" name="add" value="Add Argument" formnovalidate="formnovalidate" onclick="addRow('argsTable','argumentTr')" th:onclick="'addRow(\\'argsTable\\',\\'argumentTr\\');'"/> <tr> <th>Argument Name</th> <th>Value</th> </tr> <tr id="argumentTr" th:each="argument : *{arguments}"> <td> <input type="text" th:value="${argument.argName}" id="argName" name="argName"/> </td> <td> <input type="text" th:value="${argument.value}" id="value" name="value"/> </td> </tr> </table> </div> </div> <div class="confirmButtonsContainer"> <div class="confirmButtons"> <input type="submit" name="saveAll" value="Save Configuration" /> <input type="submit" name="updateConf" value="Update Configuration"/> </div> </div> </form> </div> </div> </body> </html> 

Answer 1

我不确定您是否正在寻找类似的内容，因为我不太清楚。 我用jQuery做了一个简单的例子。 因此，如果您的列表被选中，它将在该span添加另一个类，并且该span将采用style stylesheet文件中的stylesheet ，而不仅是添加内联样式。

PS，您也可以在没有jQuery情况下使用css进行此操作，但是我没有更改您的代码结构，因此我不得不使用jQuery做一个简单的演示。

希望这对您有所帮助！

 $("input").on("change", function(){ var _this = $(this); var checkboxElement = _this.parent().find(".rolesText"); if(_this.is(':checked')) { checkboxElement.addClass("checked"); } else { checkboxElement.removeClass("checked"); } }) 

 .roles-table input[type=checkbox] { vertical-align: middle; position: relative; bottom: 1px; } .rolesText { cursor: pointer; color: red; display: inline-block; padding: 10px; margin: 3px; } .rolesText.checked { color: blue; font-weight: bold; } .roles-table input[type="checkbox"]:checked { color: #ffffff; font-weight: bold; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div class="rolesTableContainer"> <div class="roles-table"> <ul> <li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"> <label th:field="*{roleName}" th:value="${role.getRoleName()}"> <span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span> <input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/> </label> </li> <li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"> <label th:field="*{roleName}" th:value="${role.getRoleName()}"> <span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span> <input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/> </label> </li> <li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"> <label th:field="*{roleName}" th:value="${role.getRoleName()}"> <span class="rolesText" th:text="${role.getRoleName()}">Role Name Here</span> <input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/> </label> </li> </ul> <input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate"/> <button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button> <button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button> </div> </div> 

Answer 2

级联样式表听起来很像-级联，因此您不能向后或向上，只能向前和向下。 如果要在选中复选框的情况下设置样式，请将其放在复选框之后 ，并使用同级选择器- +或~ ：

 .roles-table input[type=checkbox] { vertical-align: middle; position: relative; bottom: 1px; } .rolesText { cursor: pointer; color: red; display: block; padding: 10px; margin: 3px; } .roles-table input[type="checkbox"]:checked+span { /* this means the span that directly follows a checked input */ color: #ffffff; font-weight: bold; background: blue; } /* if you need the span to appear first, use the following */ label { display: flex; align-items: center; } label>span { order: 1; } label>input { order: 2; } 

 <div class="rolesTableContainer"> <div class="roles-table"> <ul> <li style="list-style-type: none;" th:each="role : ${currentMinionRoles}"> <label th:field="*{roleName}" th:value="${role.getRoleName()}"> <input type="checkbox" th:field="*{roleName}" th:value="${role.getRoleName()}"/> <span class="rolesText" th:text="${role.getRoleName()}">test</span> </label> </li> </ul> <input type="submit" name="remove" value="Remove" formnovalidate="formnovalidate" /> <button name="moveUP" formnovalidate="formnovalidate">&ShortUpArrow;</button> <button name="moveDown" formnovalidate="formnovalidate">&ShortDownArrow;</button> </div> </div>