html - 如何通过多个div指定元素的路径？

Question

我最近使用 HTML，需要帮助。

我有这个页面，我想将 CSS 应用到我的按钮，但我对如何正确指定该按钮的路径有点困惑。

<div class="cart">
  <div class="container">
    <div class="cart-info">
      <div class="order">
        <form action="order" method="POST">

          <h4>Pay type: </h4>
          <select name="pay_type">
            <option value="Visa">Visa</option>
            <option value="MasterCard">MasterCard</option>
          </select>
          <br>
          <br>

          <table>
            <tr>
              <th>Name</th>
              <th>Count </th>
              <th>Price</th>
            </tr>

            <c:forEach items="${cartItems}" var="items">
              <tr>
                <td> ${items.key.name} </td>
                <td> ${items.value} </td>
                <td> ${items.key.price * items.value} </td>
              </tr>
            </c:forEach>
          </table>


          <div align="right">
            <h4> Total price: ${sessionScope.totalPrice} </h4>
          </div>

          <input name="cart_id" placeholder="cart number" required><br>
          <input type="submit" value="Confirm">
      </div>
      </form>


    </div>

我正在尝试这种方式，但它不起作用

div.cart div.container div.cart-info div.order form input[type="submit"]{
  width:80%;
  margin:0 auto;
  display:block;
}

如何指定按钮的路径？

Answer 1

如果您想使用 CSS 设置样式，则无需指定输入 [type="submit"] 按钮的路径。您需要做的就是创建一个 CSS 类或 ID 选择器，向其中添加您想要的样式，然后将该类/id 添加到 input[type="submit"] 按钮，就像这样。

CSS

.btn-submit{
//this is a CSS class, can be reused
     background-color: green;
     color: white;
   }

HTML

<input type="submit" value="Confirm" class="btn-submit">