在 HTML5 中覆盖共享相同 CSS sheet 的两个表单

Question

我已经检查了这里关于覆盖的其他主题，但似乎找不到解决这个问题的方法。

我有两个 .html 文件共享同一个 .css。一个有用于通过电子邮件发送问题的文本表单。另一个只是一个基本的单选按钮列表。问题是，他们共享文本表单的 CSS 样式。我现在的方式是，每个单选按钮的文本显示在单选按钮下方。但是，如果更改 .css 的输入、文本区域代码，它会弄乱文本格式……但单选按钮会按预期显示。

我已经尝试了几种方法来覆盖它，但似乎没有任何效果。猜猜我最好破解代码...

html 1

    <form class="form" method="post" action="http://webdevbasics.net/scripts/demo.php">
        <label for="uName">Name:</label>
        <input type="text" name="uName" id="uName">
        <label for="uEmail">E-mail:</label>
        <input type="text" name="uEmail" id="uEmail">
        <label for="uQuestion">Question(s):</label>
        <textarea for="uQuestion" id="uQuestion" rows="10" cols="50">
        </textarea>
        <input id="uSubmit" type="submit" value="Submit">
        </form>

html 2

    <form name="ffFave" method="post" id="order" action="ff.php">
        <b>irrelevant flavor text<p>
        <input type="radio" name="faveff" id="fave1" value="FF1">Option 1<br>
        <input type="radio" name="faveff" id="fave2" value="FF2">Option 2<br>
        <input type="radio" name="faveff" id="fave3" value="FF3">Option 3<br>
        <input type="submit" value="Submit">
    </form>

CSS

    form {background-color: #a09da9;
  font-family: Verdana, sans-serif;
  padding: 15px;}

  input, textarea (margin-top: 10px;
            display: block;)

现在我知道罪魁祸首是显示：块。我试图根据我在此处看到的示例和其他来源来覆盖它，但是 none 我尝试过的方法... 类，覆盖了所有基本教科书 CSS...没有什么可以使该块显示在单选选项上关闭。

我需要做什么？是我看得太重了，还是我忽略了什么？

Answer 1

您可以通过这种方式覆盖单选元素样式：

form {
  background-color: #a09da9;
  font-family: Verdana, sans-serif;
  padding: 15px;
}

input, textarea {
  margin-top: 10px;
  display: block;
}

input[type=radio] {
  /* Whatever code you want to override, like display: inline */
}

Answer 2

您只需为单选按钮指定一个新规则，它将覆盖输入样式 --> 使用属性和元素选择器：

   form {
     background-color: #a09da9;
     font-family: Verdana, sans-serif;
     padding: 15px;
   }
   input,
   textarea {
     margin-top: 10px;
     display: block;
   }
   input[type=radio] {
     display: inline;
   }

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="c.css" type="text/css" media="all" />
</head>

<body>
  <form class="form" method="post" action="http://webdevbasics.net/scripts/demo.php">
    <label for="uName">Name:</label>
    <input type="text" name="uName" id="uName">
    <label for="uEmail">E-mail:</label>
    <input type="text" name="uEmail" id="uEmail">
    <label for="uQuestion">Question(s):</label>
    <textarea for="uQuestion" id="uQuestion" rows="10" cols="50">
    </textarea>
    <input id="uSubmit" type="submit" value="Submit">
  </form>

  <form name="ffFave" method="post" id="order" action="ff.php">
    <b>irrelevant flavor text<p>
        <input type="radio" name="faveff" id="fave1" value="FF1">Option 1<br>
        <input type="radio" name="faveff" id="fave2" value="FF2">Option 2<br>
        <input type="radio" name="faveff" id="fave3" value="FF3">Option 3<br>
        <input type="submit" value="Submit">
    </form>


</body>
</html>

Answer 3

如果你想覆盖一些样式，你必须写一些具有更高优先级的样式。以下是计算优先级值的规则：

如果声明来自 'style' 属性而不是带有选择器的规则，则计数 1，否则计数 0 (= a)（在 HTML 中，元素的值 "style" 属性是样式 sheet 规则。这些规则没有选择器，因此 a=1、b=0、c=0 和 d=0。）
统计选择器中ID属性的个数(=b)
统计选择器中其他属性和伪类的个数(=c)
统计选择器中元素名和伪元素的个数(=d)
特异性仅基于选择器的形式。特别是，“[id=p33]”形式的选择器被算作属性选择器（a=0，b=0，c=1，d=0），即使 id 属性被定义为 "ID" 在源文档的 DTD 中。

连接四个数字 a-b-c-d（在大基数的数字系统中）给出特异性。

在 HTML5 中覆盖共享相同 CSS sheet 的两个表单

Overriding two forms sharing the same CSS sheet in HTML5

html

css

forms

overriding