不需要的CSS樣式被應用于我的div？-有解無憂

這與“未應用樣式”完全相反，但我沒有為這個 div 設定樣式，但它仍在獲取樣式？

我正在為我父親的公司開發一個新網站，使用 HTML、CSS 和 JavaScript 制作網站。我有這個頁面，其中有一個區域，他可以在其中將自己的串列添加到站點（但是與問題無關）。最頂部的容器有一個藍色邊框（在下面的螢屏截圖中圈出），就像其他容器有（這些容器被指定有它），但是沒有樣式使這個容器有一個藍色邊框。我已經檢查以確保所有 CSS 和 HTML 都已關閉，而且情況似乎如此。我不知道這里發生了什么。此外，不需要的邊框正在將其中的第二個鏈接推出？為什么？

這是HTML：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/x-icon" href="/images/icon.ico"/>
    <link rel="stylesheet" type="text/css" href="/styling/css_reset.css"/>
    <link rel="stylesheet" type="text/css" href="/styling/navigation_bar_and_body.css"/>
    <link rel="stylesheet" type="text/css" href="/styling/web_editor_styles.css"/>
    <title>Website</title>
</head>
<body>
    <article id="web_editor_article">
        <div id="editing_options">
            <a href="/index.html" id="add_machine_listing">Add machine listing</a>
            <a href="/index.html" id="edit_machine_listing">Edit machine Listing</a>
        </div>

        <!--Based on what editing option is selected, JavaScript will change the layout-->
        <div id="add_machine_listing">
            <div>
                <h1>Add a machine listing</h1>
                <input type="text" placeholder="Enter Full Machine Name" id="machine_name"/>
                <input type="text" placeholder="Enter Machine Price (Exclude $, include commas)" id="machine_price"/>
                <textarea placeholder="Enter a very short description of the vehicle (use commas for professional format)" rows="4" cols="45" id="machine_specs_short"></textarea>
                <br>
                <textarea placeholder="Enter specs and long machine description. Include such things as possible damage, what was fixed, and some information about it" rows="7" cols="70" id="machine_specs"></textarea>
                <label for="image_selector">Select images of the machine to upload. Hold shift or ctrl/cmnd to select multiple images.</label>
                <input type="file" name="images" placeholder="Select images to upload" id="image_selector" accept="image/png, image/jpeg" multiple/>
                <button id="add_machine_submit_button">Submit Listing</button>
            </div>

            <div id="selected_images">
                <h2>Images you have selected show up here</h2>
                <p>Scroll down to see all images</p>
                <br>
                <!--JavaScript will fill this in :). JS saves the day agin!-->
            </div>

            <p id="upload_status">Upload status:</p>
        </div>

        <h2 style="margin-left: 15px;">All machine listings</h2>
        <table id="listing_table">
            <thead>
                <tr>
                    <!--Headers for columns-->
                    <td>Name</td>
                    <td>Date Created</td>
                    <td>Date Edited</td>
                    <td>Options</td>
                </tr>
            </thead>
            <tbody>
                <!--JavaScript will fill this area in :) JS helps out again-->
            </tbody>
        </table>
    </article>
</body>

<script type="module" src="/scripts/upload_script.js"></script>
<script type="module" src="/scripts/all_listings_script.js"></script>
</html>

...這是頁面的 CSS：

#add_machine_listing{
    width: 96%;
    height: fit-content;
    border: 3px solid blue;
    border-radius: 25px;
    margin-left:10px;
    margin-right: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/*The two style groups below this comment are for the div with the unwanted border*/
#editing_options{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin: 30px 10px;
}

#editing_options a{
    margin-left: 50px;
    margin-right: 50px;
}

#selected_images{
    margin-left: 50px;
    padding: 20px;
    width: 500px;
    overflow-y: scroll;
    height: 500px;
    scrollbar-width: 10px;
    border: 3px solid blue;
    border-radius: 25px;
}

#selected_image{
    height: auto;
    width: 500px;
}

input{
    display: block;
    height: 25px;
    width: 400px;
    margin-top: 10px;
    margin-bottom: 20px;
}

input[type="file"]{
    margin-top: 5px;
    margin-bottom: 10px;
    margin-bottom: 20px;
}

a{color: blue;}
label{display: block;}

#submit_button{
    background-color: wheat;
    color: red;
    font-weight: 600;
    height: 30px;
    width: 150px;
    border-radius: 20px;
}

textarea{
    resize: none;
    font-family: inherit;
    font-size: 13px;
    margin-bottom: 25px;
}

/*For the listings table*/
#listing_table{
    color:white;
    width: 98%;
    height: auto;
}

table, th, td {
    border: 10px solid white;
}

#listing_table tbody tr td{
    background-color:lightgray;
    border-collapse:separate;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 100px;
    vertical-align: top;
}

#listing_table thead tr td{
    background-color:blue;
    padding:10px;
    color:white;
}

#listing_table tbody #listing_change_buttons{
    background-color: white;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: start;
}

#listing_change_button{
    height: 25px;
    width: 25px;
    margin-right: 10px;
}

#upload_status{
    margin-left: 50px;
    height: 200px;
    width: 275px;
    border: 3px solid blue;
    border-radius: 20px;
    padding: 10px;
}

這是輸出：不需要的 CSS 樣式被應用于我的 div？

我嘗試過 的只是想指出 JavaScript 檔案不會以任何方式改變這個容器。

我曾嘗試通過在容器上設定來消除邊框效果border: none;，但這不起作用。
我正在使用帶有實時服務器插件的 Visual Studio 代碼來測驗網站。我已經多次重新啟動軟體，結果相同。
使用 Firefox 測驗網站是我認為的原因，但是當使用 Chrome 或 Safari 等其他瀏覽器時，會出現同樣的問題

uj5u.com熱心網友回復：

您id="add_machine_listing"在多個元素上使用相同，因此您的樣式#add_machine_listing適用于兩者。洗掉或更改錨標記上的 id：

<a href="/index.html" id="add_machine_listing">Add machine listing</a>

還值得注意的是，沒有兩個元素可以具有相同的 ID。出于樣式目的，使用類名而不是 id 通常是“最佳實踐”（這是一種不成文的規則）。我通常盡量避免使用 ID。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/531657.html

標籤：htmlcss

上一篇：蟒蛇硒；從值“資料標簽”獲取資料

下一篇：為什么我的導航欄不能使用javascript代碼