semantic-ui 样式输入不起作用

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

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

你有两个选择

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

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

更具体

当您发现 CSS 似乎无法正常工作时，请使用开发工具查看它是否出现，以及是否出现了覆盖它的内容。

semantic-ui 样式输入不起作用

semantic-ui styling input not working

css

semantic-ui