无法将 css 样式应用于列表中的范围

Question

所以我在这里有一个非常有趣的问题。我认为这是我不知道的事情，或者某处存在错误/逻辑问题。总之长话短说，我有一个 html 代码，其中包含由 thymeleaf 生成的列表。这个想法是在每个列表元素后面隐藏一个复选框按钮，这使得它可以选择，因此为我提供了一种快速简便的方法来处理 java 端的数据。

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

点击时我正在尝试更改指针/颜色。我已将一个类添加到我的 css 文件中使用的一个跨度元素中，如下所示。我尝试了很多不同的方法，但没有一个将它应用于我的 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 将从 stylesheet 文件中获取 style，而不仅仅是添加内联样式。

P.S，你也可以用 css 来做，不用jQuery，但是我没有改变你的代码结构，所以我只好用 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>