搜索框表单不采用外部样式表中的 CSS 样式答案

【问题标题】：Search box form not taking on CSS styling from external style sheet搜索框表单不采用外部样式表中的 CSS 样式
【发布时间】：2015-04-12 13:18:41
【问题描述】：

我有一个外部样式表和我正在处理的 html 页面。正确链接的 CSS 文件和页面正在呈现样式，除了我为搜索框添加的表单。这是 HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>ASA Databse</title>
</head>
<body>
    <h1 align="center">Autism Resources</h1>
    <form align="center">
        <input type="text" placeholder="Enter Query..." required>
        <input type="button" value="Search Database">
    </form>
    <table align="center">
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Item Number</th>
            <th>Status</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="even">
            <td>Charles d'Orleans</td>
            <td>Poemes</td>
            <td class="money"></td>
            <td class="money">$5,866.00</td>
        </tr>
        <tr>
            <td>T.S. Eliot</td>
            <td>Poems 1909 - 1925</td>
            <td class="money">$1,250.00</td>
            <td class="money">$8,499.35</td>
        </tr>
        <tr class="even">
            <td>Sylvia Plath</td>
            <td>The Colossus</td>
            <td class="money"></td>
            <td class="money">$1031.72</td>
        </tr>
    </table>
</body>

这是 CSS：

 body {
            font-family: Arial, Verdana, sans-serif;
            color: #111111;}
        table {
            width: 1000px;}
        th, td {
            padding: 7px 10px 10px 10px;}
        th {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 90%;
            border-bottom: 2px solid #111111;
            border-top: 1px solid #999;
            text-align: left;}
        tr.even {
            background-color: #efefef;}
        tr:hover {
            background-color: #207cca;}
        .money {
            text-align: right;}
        form {
            width: 500px;
            margin: 50px auto;}
        .search {
            padding: 8px 15px;
            background: rgba(50, 50, 50, 0.2);
            border: 0px solid #dbdbdb;}
        .button {
            position: relative;
            padding: 6px, 15px;
            left:-8px;
            border: 2px solid #207cca;
            background-color: #207cca;
            color: #fafafa;}
        .button:hover {
            background-color:#fafafa;
            color:#207cca;}

在表单的宽度和边距之后，没有任何样式被应用到搜索栏中...提前感谢您的帮助！

【问题讨论】：

您是否使用 Chrome Inspector（或任何调试器）来准确查看哪些样式表正在应用于表单对象？
不，我不是。我猜那是一个chrome扩展？我现在就去。

标签： html css

【解决方案1】：

您的样式表中有.search，但没有带有class="search" 的元素。

试试：

<input type="text" placeholder="Enter Query..." id="search" class="search" name="search" required>

【讨论】：

只是想我会提到我相信你只需要 'class="search"' 部分。干杯！
是的，你是对的@Edge，但是如果在将来的任何时候添加<label>，则需要name="search"，而class="search" 对css 很方便， id="search" 可以在将来的任何时候直接在 javascript 中使用 getElementById。（这就是我添加所有三个的原因！）如果它适合您，请接受上面的答案 - 非常感谢！

【解决方案2】：

点表示 CSS 中的类，而您的元素没有类。

【讨论】：