某些 CSS 规则不适用于外部链接 [重复]答案

【问题标题】：Some CSS rules are not applied from external link [duplicate]某些 CSS 规则不适用于外部链接 [重复]
【发布时间】：2020-12-18 21:32:38
【问题描述】：

我创建了一个用于多个 HTML 文档的 common.css 文件。我的问题是为什么不应用一些 CSS 规则，例如：

这部分不适用

*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

所有其他规则都有效

*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

.input-span {
  display: inline-block;
  border: none;
  padding: 1px;
  outline: none;
  text-align: center;
  min-width: 100px;
  font-style: italic;
  border-bottom: 1px solid grey;
}

.input-span:focus {
  border-color: blue;
}

table.table {
  border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
  border: 2px solid black;
}

.footer {
  margin-bottom: 50px;
}

@media print {
  .footer {
    page-break-before: always;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link href="./common.css" rel="stylesheet" type="text/css">

  <style type="text/css">

  </style>

</head>

<body>
  <form>
    <div>
      <small>Reviziya nömrəsi: 1.00</small>
    </div>
    <div style="text-align: center;">
      <h4 style="margin: 0;">
        Nömrənin abunəçinin adından başqa şəxsin adına keçirilməsi forması</br>
        (çoxsaylı nömrələr)
      </h4>
    </div>

    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
      <div>
        Nö *
      </div>
      <div>
        Tarix:
        <span class="input-span" contenteditable="false">{{date}}</span>
      </div>
    </div>

    <div style="display: flex; justify-content: space-evenly; margin-bottom: 8px">
      <p>Fakturalı xətt <input id="postpaid" type="checkbox">
      </p>
      <p>Fakturasız(SimSim) xətt <input id="prepaid" type="checkbox">
      </p>
    </div>

    <div style="display: flex; gap: 16px; margin-bottom: 8px ">
      <div>
        Abunəçiyə aid məlumatlar
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{customer.contract.firstName}}
                    {{customer.contract.lastName}} {{customer.contract.patronymic}}</span>

        <p style="text-align: center; padding: 0; margin: 0;">
          <small>Adı Soyadı Atasının adı</small>
        </p>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 16px">
      <div>
        Sənədin seriyası / Nö
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{customer.contract.documentNumber}}</span>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 8px ">
      <div>
        Nömrəni adına keçirən şəxs
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{inputs.newUserfirstName}}
                    {{inputs.newUserLastName}} {{inputs.newUserPatronymic}}</span>

        <p style="text-align: center; padding: 0; margin: 0;">
          <small>Adı Soyadı Atasının adı</small>
        </p>
      </div>
    </div>


    <div style="display: flex; gap: 16px; margin-bottom: 8px">
      <div>
        Sənədin seriyası / Nö
      </div>
      <div style="flex-grow: 1;">
        <span style="width: 100%;" class="input-span" contenteditable="true">{{inputs.newUserDocumentNumber}}</span>
      </div>
    </div>

    <p>*nömrələrin siyahısı əlavə edilir</p>


    <p>Tərəflər aşağıdakı şərtlərdən xəbərdardırlar:
    </p>

  </form>

  <script language="javascript">
    let customerType = '{{customer.customerType}}';

    if (customerType.toLowerCase() === 'prepaid') {
      document.querySelector('input#prepaid').checked = true;
    } else if (customerType.toLowerCase() === 'postpaid') {
      document.querySelector('input#postpaid').checked = true;
    }


    function addRow(tableName) {

      var table = document.getElementById(tableName);
      var rowCount = table.rows.length;

      var cellCount = table.rows[table.rows.length - 1].cells.length;

      var row = table.insertRow();

      for (let i = 0; i < cellCount; i++) {
        var cell = row.insertCell(i);
        if (i === 0) {
          cell.innerText = rowCount + '.';
        } else {
          cell.innerHTML = '<span class="input-span" contenteditable="true"></span>';
        }
      }

    }

    for (let i = 0; i < 5; i++) {
      addRow('table');
    }
  </script>
</body>

</html>

【问题讨论】：

与您的问题无关，但您不再需要使用自闭合 br 标签，但如果您这样做，斜线会在 br 之后，而不是之前

标签： html css

【解决方案1】：

尝试仅将未运行的代码放在 CSS 文件的底部。有时，代码确实会被应用，但在浏览器运行 CSS 文件的其余部分后会被覆盖。所以你的 CSS 文件应该是这样的：

.input-span {
  display: inline-block;
  border: none;
  padding: 1px;
  outline: none;
  text-align: center;
  min-width: 100px;
  font-style: italic;
  border-bottom: 1px solid grey;
}

.input-span:focus {
  border-color: blue;
}

table.table {
  border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
  border: 2px solid black;
}

.footer {
  margin-bottom: 50px;
}

@media print {
  .footer {
    page-break-before: always;
  }
}
*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

【讨论】：

谢谢，你的回答拯救了我的一天