Question

我的文件如下。 class / div只从主体文件继承，我不知道为什么。我究竟需要格式化CSS以使样式正常工作？文件正确链接，但表单仍然没有显示程式化版本。按钮工作正常，只有列表被打破。

/* Style the list items */
#add_step_item > form > ul > li{
      cursor: pointer;
      position: relative;
      padding: 12px 8px 12px 40px;
      font-size: 18px;
      transition: 0.2s;
}

/* Set all odd list items to a different color (zebra-stripes) */
#add_step_item > form > ul > li:nth-child(odd) {
      background: #f9f9f9;
}

  /* Darker background-color on hover */
#add_step_item > form > ul > li:hover {
      background: #ddd;
}

  /* When clicked on, add a background color and strike out text */
#add_step_item > form > ul > li.checked {
      background: #888;
      color: #fff;
      text-decoration: line-through;
}

  /* Add a "checked" mark when clicked on */
#add_step_item > form > ul > li.checked::before {
      content: '';
      position: absolute;
      border-color: #fff;
      border-style: solid;
      border-width: 0 2px 2px 0;
      top: 10px;
      left: 16px;
      transform: rotate(45deg);
      height: 15px;
      width: 7px;
}

Index.haml

- if @user.teacher?
  #add_step_item
    = form_for '', :remote => true do |f|
      %input{:name => "fixed_date", :type => "hidden", :value => ""}
      %input{:name => "student_id", :type => "hidden", :value => @student.id}
      %input{:name => "description", :type => "hidden", :value => "このステップをやり直してください！"}
      %input{:name => "difficulty", :type => "hidden", :value => "0"}
      %h1 弱点
      %ul
        %li With a class attached,
        %li I can style this one
        %li differently than others.
      %button{:type => "button", :value => "キャンセル"} キャンセル
      %button{:type => "submit", :value => "addstep"} 追加する
      %button{:type => "submit", :value => "change"} 変更する

为什么CSS样式不适用于我的div和class组合？

0 个答案: