基本,上下文,伪类(结构,状态)选择器的各种应用 -

/* 基本选择器 */
h2{
    color:aqua
}
h2.spring {
    color:blue
}
h2#item {
    color:red
}
/* 上下文选择器 */
/* 父子选择器 */
ul.list > .ent {
    border: thin solid;
}
/* 后代选择器 */
ul.list >.ent .entent {
    color:blue
}
/* 兄弟选择器 */
ul.list > .ent.start + * {
    background-color: blueviolet;
}
/* 同级选择器 */
ul.list > .ent.cken ~ * {
    color: indianred;
}
/* 伪类选择器 */
ul.bord > :first-child {
    color: tomato;
}
ul.bord > :last-child {
    color: blue;
}
ul.bord > :nth-child(2n + 2) {
    color:deeppink
}
/* ! 状态伪类 */
fieldset {
  display: inline-grid;
  gap: 1em;
  border-radius: 10px;
  padding: 1em 2em;
  color: #666;
  background: linear-gradient(to left top, lightcyan, white);
}
fieldset legend {
  text-align: center;
}
fieldset input {
  padding: 5px;
  border: none;
  border-bottom: 1px solid #666;
  outline: none;
  background-color: transparent;
}
/* ---------------------------- */
fieldset :focus {
    background-color: lightsalmon;
}
input[type='checkbox']:checked + label {
    color: red;
}
button:hover {
    cursor: pointer;
    opacity: 0.2;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/0205selector.css">
    <title>Document</title>
</head>
<body>
    <!-- 基本选择器 -->
    <h2>Hello World</h2>
    <h2 class="spring">Hello spring</h2>
    <h2 id="item">Hello everybody</h2>
    <hr />
    <!-- 上下文选择器 -->
    <ul class="list">
        <li class="ent">实例1</li>
        <li class="ent">实例2</li>
        <li class="ent">
            <ul>
                <li class="entent">item1</li>
                <li class="entent">item2</li>
                <li class="entent">item3</li>
            </ul>
        </li>
        <li class="ent">实例4</li>
        <li class="ent start">实例5</li>
        <li class="ent ">实例6</li>
        <li class="ent cken">实例7</li>
        <li class="ent">实例8</li>        
        <li class="ent">实例9</li>  
    </ul>
    <hr/>
    <!-- 伪元素选择器 -->
    <ul class="bord">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
    </ul>
    <hr >
    <!-- 状态伪类 -->
    <form action="">
      <fieldset>
        <legend>用户注册</legend>
        <!-- autofocus: 布尔属性,自动获取焦点 -->
        <input type="text" id="username" name="username" placeholder="用户名" required autofocus />
        <input type="email" id="email" name="email" placeholder="邮箱" required disabled />
        <input type="password" id="password" name="password" placeholder="密码" required />
        <!-- 复选框默认是选中状态: checked -->
        <div>
          <input type="checkbox" id="rem" name="remember" checked />
          <label for="rem">记住我</label>
        </div>
        <button>提交</button>
      </fieldset>
    </form>
</body>
</html>