css - 语义UI样式输入不起作用

我有这个简单的导航。

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

对它没有任何影响。

最佳答案

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

如您所见，您的自定义CSS在chrome开发人员工具中被删除。

你有两个选择


Make your CSS Selector more specific
在样式后加上!important，例如border:1px solid red !important;


选项1更可取。我在这里用example做了一个JSFiddle。通过添加red-border，我使样式比语义UI CSS更具体。

当发现CSS似乎无法正常工作时，请使用dev工具查看它是否显示，以及是否可以覆盖它。

关于css - 语义UI样式输入不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35813820/