CSS 和 FORM 工作，但嵌入时不起作用

Question

我是一名学习开发人员，并且：

我正在帮助一位朋友设计他的“ejunkie”购物车和变体按钮。我自己添加了 CSS 来对其进行样式化，它似乎可以在 Codepen 和 JS fiddle 等地方工作，但是当嵌入 Adob​​e Muse 时它不显示。也许我的课程与 adobe css 发生冲突，但我肯定没有类名发生冲突。我认为我的班级输入是正确的，并且在“预览”中，按钮功能正常，并且项目已成功添加到购物车中。也许这是一个简单的修复，但我重写了 4 次，仍然无法正常运行。

我写的代码在这里：

<style>


  .titles1 {
    color: black;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }

  .sizes1 {
    color: #000;
    background-color: ;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .sizes1:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .colours1 {
    color: #000;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .colours1:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .ec_ejc_thkbx {
    margin-left: 65px;
    margin-top: 10px;
  }

</style>

<form class="titles1" action="https://www.e-junkie.com/ecom/gb.php?c=cart&cl=304052&i=1&ejc=2" method="POST" target="ejejcsingle" accept-charset="UTF-8" >
<input type="hidden" name="on0" value="Size">
Size:<br>
<select name="os0" class="sizes1">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="ExtraLarge">ExtraLarge</option>
</select><br>
<input type="hidden" name="on1" value="ColourWays">
ColourWays:<br>
<select name="os1" class="colours1" >
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Navy">Navy</option>
<option value="GreyMarl">GreyMarl</option>
<option value="Royal">Royal</option>
</select><br>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0"  alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);">
</form>

要设置样式的原始代码在这里：

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&cl=304052&i=1&ejc=2" method="POST" target="ejejcsingle" accept-charset="UTF-8">
<input type="hidden" name="on0" value="Size">
Size:<br>
<select name="os0">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="ExtraLarge">ExtraLarge</option>
</select><br>
<input type="hidden" name="on1" value="ColourWays">
ColourWays:<br>
<select name="os1">
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Navy">Navy</option>
<option value="GreyMarl">GreyMarl</option>
<option value="Royal">Royal</option>
</select><br>
<input type="image" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0"  alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);">
</form>

我是不是做错了什么？

感谢您抽出宝贵时间阅读本文，并感谢您的回答。

Answer 1

尝试使用以下 CSS

  form[target="ejejcsingle"] {
    color: black;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
  }

  select[name="os0"]{
    color: #000;
    background-color: ;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  select[name="os0"]:hover {
    color: #fff;
    background-color: #000 !important;
  }

  select[name="os1"] {
    color: #000;
    font-family: 'helvetica', sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 220px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  select[name="os1"]:hover {
    color: #fff;
    background-color: #000 !important;
  }

  .ec_ejc_thkbx {
    margin-left: 65px;
    margin-top: 10px;
  }

可能你需要更多的编辑，这是根据你给定的 html。 工作Fiddle