Question

首先：我知道已经多次问过类似的问题了。我阅读并尝试了建议的解决方案，他们支持我的IDE的错误消息。

但是如果我将样式添加到类似标题的解决方案建议中，它将不再适用于我的引导按钮。

<style>.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
}</style>

如果我内联它的代码。

<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#myModal" data-th-id="${person.getId()}" style="outline:none;box-shadow:none;">

如果我将样式添加到正文中，它也会应用我想要的效果。

所以我感兴趣的是如何使这个W3C符合并且无需内联工作。

这是它的工作方式，但抱怨IDE

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<!-- start header -->
<!-- Fixed navbar -->
<div th:replace="template :: navbar"></div>

<!-- end header -->

<!--- start table -->
<div class="container">
    <div>
        <style>.btn:focus, .btn:active {
            outline: none !important;
            box-shadow: none !important;
        }</style>
    </div>
    <br>
    <h3>Overview</h3>
    <br>

    <div class="container">
        <div class="col-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Age</th>
                    <th scope="col">ID</th>
                </tr>
                </thead>
                <tbody>
                <!--/*@thymesVar id="productList" type="java.util.List"*/-->
                <tr th:id="${person.getId()}" th:each="person : ${elementList}">

                    <td th:text="${person.getName()}" class="username"></td>
                    <!--/*@thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
                    <td th:text="${person.getAge()}" class="age"></td>
                    <!--/*@thymesVar id="getTop" type="java.lang.Double"*/-->
                    <td th:text="${person.getId()} " class="id"></td>

                    <td>
                        <div class="btn-toolbar" role="toolbar">
                            <!-- Button trigger modal -->
                            <div class="btn-group mr-2" role="group" aria-label="First group">
                                <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
                                        data-target="#myModal" data-th-id="${person.getId()}">
                                    Edit
                                </button>
                            </div>
                            <div class="btn-group mr-2" role="group" aria-label="Second group">
                                <button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
                                </button>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <button class="btn btn-primary" type="button" id="addElement">Add Element</button>
        <button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
    </div>
</div>

这里不允许元素样式，但只能像这样工作

0 个答案: