伪类与伪元素

- 作者：霏梦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类与伪元素</title>
    <style>
      a {
      }
      #login {
        display: none;
      }
      #login:target {
        display: block;
      }
      input:focus {
        background-color: yellowgreen;
      }
      input::selection {
        color: white;
        background-color: red;
      }
      /* not */
      .list > :not(:nth-of-type(3)) {
        color: red;
      }
      /* ::before */
      .list::before {
        content: "购物车";
        font-size: 1.5em;
        border-bottom: red 1px solid;
      }
      /* after */
      .list::after {
        content: "结尾";
        color: royalblue;
        font-size: 1.5em;
      }
    </style>
  </head>
  <body></body>
  <!-- <a href="#login">我要登录</a> -->
  <button onclick="location='#login'">从这登录：</button>
  <form action="" method="post" id="login">
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" />
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" />
    <button>登录</button>
  </form>
  <hr />
  <ul class="list">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
  </ul>
</html>
- 作者：霏梦

相关文章
