css - 语义用户界面 : ui error inside pushable doesnot work

Question

我正在使用 pushable 在侧边栏内创建一个表单，HTML 结构在下面的代码片段中

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet"/>
<div class="ui card pushable" style="height: 82vh; padding: 0px;">
  <div class="ui segment ui overlay right wide visible sidebar" style="padding: 0px;">
    <div class="ui card">
      <div class="content">
        <div class="header">Add Merchant Group</div>
      </div>
      <div class="content">
        <form class="ui form">
          <div class="field"><label>Name</label>
            <div class="ui error input"><input type="text"></div>
          </div>
        </form>
      </div>
      <div class="extra content"><button class="ui blue right floated button"><i aria-hidden="true" class="user plus icon"></i>Add</button><button class="ui red right floated button">Cancel</button></div>
    </div>
  </div>
  <div class="pusher">
    <div class="ui grid">
      <div class="one column row">
        <div class="column">
          <div class="ui raised segments">
            <div class="ui clearing segment"><button class="ui small compact right floated button light"><i aria-hidden="true" class="plus icon"></i>Add</button></div>
            <div class="ui segment" style="padding: 0px;">
              <table class="ui selectable single line table">
                <thead class="">
                  <tr class="left aligned">
                    <th class="">Name</th>
                    <th class="">Description</th>
                    <th class=""></th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="">
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class=""><button class="ui red mini icon button light"><i aria-hidden="true" class="red delete icon"></i></button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui error input"><input type="text"></div>

如你所见<div class="ui error input"><input type="text"></div>在 pushable 的 div 内部和外部表现不同。唯一被标记为错误的是输入的占位符，出了什么问题？我应该定义新规则吗？

Answer 1

如果仔细检查，可以看到外面的输入是受选择器影响的.ui.error.input > input 而表单内的输入已受到选择器 .ui.form input[type="text"] 的影响。

它们具有相同的特异性值，因此后者将覆盖第一个选择器定义的规则。

您可以简单地将其包装在 .form 元素中或添加我在下面的代码片段中添加的 css

.ui.error.input input[type="text"] {
  color: rgba(0, 0, 0, 0.95);
  border-color: #85B7D9;
  border-radius: 0.28571429rem;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet" />
<div class="ui card pushable" style="height: 82vh; padding: 0px;">
  <div class="ui segment ui overlay right wide visible sidebar" style="padding: 0px;">
    <div class="ui card">
      <div class="content">
        <div class="header">Add Merchant Group</div>
      </div>
      <div class="content">
        <form class="ui form">
          <div class="field"><label>Name</label>
            <div class="ui error input"><input type="text"></div>
          </div>
        </form>
      </div>
      <div class="extra content"><button class="ui blue right floated button"><i aria-hidden="true" class="user plus icon"></i>Add</button><button class="ui red right floated button">Cancel</button></div>
    </div>
  </div>
  <div class="pusher">
    <div class="ui grid">
      <div class="one column row">
        <div class="column">
          <div class="ui raised segments">
            <div class="ui clearing segment"><button class="ui small compact right floated button light"><i aria-hidden="true" class="plus icon"></i>Add</button></div>
            <div class="ui segment" style="padding: 0px;">
              <table class="ui selectable single line table">
                <thead class="">
                  <tr class="left aligned">
                    <th class="">Name</th>
                    <th class="">Description</th>
                    <th class=""></th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="">
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class=""><button class="ui red mini icon button light"><i aria-hidden="true" class="red delete icon"></i></button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui error input"><input type="text"></div>