Question

我有这个简单的导航。

<div class="ui attached stackable menu">
  <div class="ui container">
    <a class="item">
       Home
    </a>
    <div class="ui simple dropdown item">
      More
      <i class="dropdown icon"></i>
      <div class="menu">
        <a class="item"><i class="edit icon"></i> Edit Profile</a>
        <a class="item"><i class="globe icon"></i> Choose Language</a>
        <a class="item"><i class="settings icon"></i> Account Settings</a>
      </div>
    </div>
    <div class="item">
      <div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>
    </div>  
  </div>
</div>

我正在尝试为<div class="ui input"><input placeholder="Search..." type="text" class="dictionary"></div>添加样式，但没有应用任何样式，例如

input.dictionary{
  border:1px solid red;
}

对它没有任何影响。

Answer 1

好的，那么发生的是语义UI覆盖了您的自定义样式： http://i.imgur.com/ayRs3Kx.png

正如您所看到的，您在Chrome开发人员工具中划掉了自定义CSS。

您有两个选择

Make your CSS Selector more specific
在您的风格之后加入!important，例如border:1px solid red !important;

选项1更为可取。我在这里用example创建了一个JSFiddle。通过添加red-border，我的风格比语义UI CSS更具体。

如果您发现CSS似乎无法正常工作，请使用开发工具查看它是否显示，以及它是否覆盖了它。

语义ui样式输入不起作用

1 个答案: