CSS 基本选择器、上下文选择器、伪类选择器区别演示

选择器

基本选择器

1. 元素选择器 - div h1 h2

2. 属性选择器 - div[class='box']
   id, class 使用频率很高的选择器,有专用的语法糖

#id, .class

上下文选择器

1. 父子元素 >
2. 后代元素 div p
3. 兄弟元素 +
4. 同级元素 ~

伪类选择器

结构伪类

1. :nth-child(): 选取父元素的第 N 个子元素
2. :first-child: 第一个元素
3. :last-child: 最后一个
4. :nth-last-child(): 匹配属于其元素的第 N 个子元素的每个元素，从最后一个子元素开始计数

状态伪类

1. :hover: 鼠标悬停
2. :enabled: 有效控件
3. :disabled: 禁用控件
4. :checked: 选中控件
5. :required: 必选控件
6. :focus: 焦点控件

伪类选择器

:nth-of-type(an + b)

1. a: 系数, [0,1,2,3…]
2. n: 参数, [0,1,2,3…]
3. b: 偏移量, 从零开始
   规则: 计算出来的索引,必须是有效的（从1开始）

实例

基本选择器

<ul class="list" id="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item cur">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
  <li class="item">item7</li>
  <li class="item">item8</li>
</ul>

.list {
  background-color: red;
}
#list {
  background-color: red;
}

上下文选择器

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item cur">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
  <li class="item">item7</li>
  <li class="item">item8</li>
</ul>

父元素选择器 >

.list > {
  background-color: red;
}

后代元素 空格

.list li {
  background-color: red;
}

兄弟元素 +

.list li + li {
  background-color: red;
}

同级元素 ~

.list li ~ li {
  background-color: red;
}

伪类选择器

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
  <li class="item">item7</li>
  <li class="item">item8</li>
  <li class="item">item9</li>
  <li class="item">item10</li>
</ul>

1. 结构伪类

/* 第一个 */
.list li:first-child {
  background-color: blue;
}
/* 最后一个 */
.list li:last-child {
  background-color: aqua;
}
/* 匹配前三个 */
.list > :nth-child(-n-3) {
  background-color: beige;
}
/* 匹配倒数第三个 */
.list > :nth-last-child(-n + 3) {
  background-color: khaki;
}
/* 规则: 计算出来的索引,必须是有效的（从1开始） */
.list > :nth-of-type(4n + 1) {
  background-color: blueviolet;
}

2.状态伪类

<form action="" method="post">
  <label for="a1">
    <input type="text" id="a1" name="" value="" />
  </label>
  <label for="a2">
    <input type="button" id="a2" name="" disabled value="按钮" />
  </label>
  <label for="a3">
    <input type="text" id="a3" name="" required value="数值" />
  </label>
  <label for="a4">
    <input type="text" id="a4" name="" value="数值1" />
  </label>
  <label for="a5">
    <input type="checkbox" name="" id="a5" />
    <span>演示</span>
  </label>
  <button type="button">提交</button>
</form>

/* 鼠标悬停 */
form button:hover {
  background-color: gold;
}
/* 有效控件 */
form label:nth-child(1) input:enabled {
  background-color: aquamarine;
}
/* 禁用控件 */
form label:nth-child(2) input:disabled {
  background-color: gray;
}
/* 必选控件 */
form label:nth-child(3) input:required {
  background-color: salmon;
}
/* 焦点控件 */
form label:nth-child(4) input:focus {
  background-color: sienna;
}
/* 选中控件 */
form label:nth-child(5) input[type="checkbox"]:checked + span {
  color: red;
}

使用 :checked 实现显示和隐藏

<label for="ic" class="btn">
  <span>点击</span>
  <input type="checkbox" id="ic" name="2" />
  <ul class="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
  </ul>
</label>

.list {
  display: none;
}
.btn input[type="checkbox"]:checked + ul {
  display: block;
}