Question

我在html中使用选择器，如果我在HTML中设置样式，它看起来很正常。

<div class="input-group" style="margin-bottom: 10px;margin-top: 0px">
    <input type="text"  class="form-control" id="search" value="{{ search_word }}"  style="height: 30px "  onkeydown="entersearch()" placeholder="Enter to search...">
        <div class="input-group-btn" style="font-size: x-small">
            <!--<select id="idsel" class="form-control select-input" >-->
                <option value="campaignid">campaignid</option>
                <option value="vender" >vender</option>
                <option value="pkgname" >package</option>
           </select>
       </div>
 </div>

但是当我改变它以在CSS中设置样式时，它不起作用......

<div class="input-group" style="margin-bottom: 10px;margin-top: 0px">
    <input type="text"  class="form-control" id="search" value="{{ search_word }}"  style="height: 30px "  onkeydown="entersearch()" placeholder="Enter to search...">
        <div class="input-group-btn" style="font-size: x-small">
             <select id="idsel" class="form-control select-input-gp" >
                <option value="campaignid">campaignid</option>
                <option value="vender" >vender</option>
                <option value="pkgname" >package</option>
             </select>
        </div>

<script type="text/css">
   .select-input-gp{
        height: 30px;
        width: 200px;
        color:#fff;
        background-color:#337ab7;
        border-color:#2e6da4;
   }
</script>

很奇怪。谁能给我一个指南？

Answer 1

而不是<script type='text/css'>使用<style type='text/css'>

在您的情况下，整个样式代码将是：

<style type="text/css">
   .select-input-gp {
        height: 30px;
        width: 200px;
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4;
   }
</style>

Answer 2

您不需要<script>标记，因为您没有引用脚本;您正在引用某个样式，因此您需要将其替换为<style>标记。

<style>标记应在HTML的<head>中声明，有关详情，请参阅here。

为什么这个CSS没有生效？

2 个答案: