Question

所以我在这里有一个非常有趣的问题。我认为这是我不知道的事情，或者某处有错误/逻辑问题。无论如何长话短说我有一个html代码，其中包含由thymeleaf生成的列表。我们的想法是隐藏每个列表元素后面的复选框按钮，这使得它可以选择，因此我可以快速简便地处理数据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，而不仅仅是添加内联样式

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

级联样式表就像它们的声音一样 - 级联，因此您不能向后或向上，只能向前和向下。如果要在选中复选框时设置样式，请在复选框之后将其放置并使用同级选择器 - +或~：

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案: