Question

我在这里检查过覆盖其他主题，似乎找不到解决这个问题的方法。

我有两个.html文件共享相同的.css。一个人有一个用于发送问题的文本表格。另一个只是一个基本的单选按钮列表。问题是，他们分享了文本形式的CSS风格。我现在拥有它的方式，每个单选按钮的文本显示在单选按钮下方。但是，如果改变.css的输入，textarea代码，它会混淆文本形式......但是单选按钮会出现。“/ p>

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

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;)

现在我知道罪魁祸首是显示：阻止。我试图根据我在这里发布的示例以及其他来源覆盖它，但我尝试过的方法都没有...类，覆盖，所有基本的教科书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

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

   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

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

如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）
计算选择器（= b）
计算选择器（= c）
计算选择器中的元素名称和伪元素的数量（= d）
特异性仅基于选择器的形式。特别是，“[id = p33]”形式的选择器被计为属性选择器（a = 0，b = 0，c = 1，d = 0），即使id属性被定义为“ID” “在源文件的DTD中。

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

覆盖HTML5中共享同一CSS表的两个表单

3 个答案: