CSS3选择器

选择器

:nth-child(an+b)

用途：选择父元素内处于特定序数位置的所有类型子元素，从第一个子元素开始计数。

语法：:nth-child(an+b)，其中 a、b 是整数，n 是一个非负整数索引。表达多种位置模式，如：

• :nth-child(n)：选择所有子元素。
• :nth-child(odd) 或 :nth-child(even)：选择奇数或偶数位置的子元素。
• :nth-child(3n)：选择每第3个子元素。
• :nth-child(2n+1)：选择所有奇数位置的子元素。
• :nth-child(5n-2)：选择每第5个子元素，从第3个开始。

:nth-last-child(an+b)

用途：选择父元素内处于特定序数位置的所有类型子元素，但从最后一个子元素开始反向计数。

语法：:nth-last-child(an+b)，语法和含义与 :nth-child() 相同，但计数方向相反。

:nth-of-type(an+b)

用途：选择父元素内处于特定序数位置的同类型子元素，从第一个同类型子元素开始计数。

语法：:nth-of-type(an+b)，语法和含义与 :nth-child() 相同，但仅限于同类型元素。

:nth-last-of-type(an+b)

用途：选择父元素内处于特定序数位置的同类型子元素，但从最后一个同类型子元素开始反向计数。

语法：:nth-last-of-type(an+b)，语法和含义与 :nth-of-type() 相同，但计数方向相反。

/* 选择列表中倒数第3个li元素 */
li:nth-last-child(3) {
  background-color: orange;
}

/* 选择div内最后一个段落元素之前的第2个段落元素 */
div p:nth-last-of-type(2) {
  font-weight: bold;
}

/* 选择所有img元素中，从最后一个开始计算的第3个偶数位置的img元素 */
img:nth-last-of-type(2n+1) {
  border: 1px solid black;
}

:not()

用途：选择不匹配指定选择器的所有元素。
语法：:not(selector)，其中 selector 是任何有效的CSS选择器。

  /* 选择所有非div元素 */
  :not(div) {
    color: red;
  }

  /* 选择未被选中的复选框 */
  input[type="checkbox"]:not(:checked) {
    opacity: 0.5;
  }

:checked

用途：选择所有被选中的表单输入元素，如复选框（<input type="checkbox">）和单选按钮（<input type="radio">）。

  /* 为选中的复选框添加边框 */
  input[type="checkbox"]:checked {
    border: 1px solid blue;
  }

:disabled

用途：选择所有禁用的表单元素，如 <input>, <select>, <textarea> 等。

  /* 为禁用的按钮添加灰色文本 */
  button:disabled {
    color: gray;
  }

:empty

用途：选择没有子元素（包括文本节点）的元素。

  /* 为空的段落添加提示文本 */
  p:empty::before {
    content: "This paragraph is empty.";
    color: darkred;
  }

:enabled

用途：选择所有启用的表单元素，与 :disabled 相反。

  /* 为启用的输入框添加边框 */
  input:enabled {
    border: 1px solid green;
  }

:first-of-type

用途：选择父元素内属于其类型的第一个子元素。

  /* 为第一个段落添加背景色 */
  p:first-of-type {
    background-color: lightblue;
  }

:last-of-type

用途：选择父元素内属于其类型的最后一个子元素。

  /* 为最后一个段落添加下划线 */
  p:last-of-type {
    text-decoration: underline;
  }

:only-child

用途：选择没有任何同胞元素的元素。

  /* 为独占一行的元素增加垂直间距 */
  .container > :only-child {
    margin-top: 20px;
    margin-bottom: 20px;
  }

:only-of-type

用途：选择没有同类型同胞元素的元素。

  /* 为唯一的段落元素添加粗体 */
  .content > p:only-of-type {
    font-weight: bold;
  }

:required

用途：选择具有 required 属性的表单元素。

  /* 为必填字段添加红色星号 */
  input:required::after {
    content: "*";
    color: red;
  }

:optional

用途：选择没有 required 属性的表单元素。

  /* 为非必填字段添加灰色问号 */
  input:optional::after {
    content: "?";
    color: gray;
  }

::before

用途：在元素内容的开头插入生成的内容（通常通过 content 属性定义），并对其进行样式化。

  /* 为每个段落前添加蓝色引号 */
  p::before {
    content: '"';
    color: blue;
    font-size: 24px;
  }

::after

用途：在元素内容的结尾插入生成的内容（通常通过 content 属性定义），并对其进行样式化。

  /* 为每个段落后添加红色引号 */
  p::after {
    content: '"';
    color: red;
    font-size: 24px;
  }

::first-letter

用途：选择元素内首字母（可能包括多个字符，如连字符、撇号等与首字母形成视觉整体的部分），并对它单独应用样式。

  /* 为每个段落首字母添加大写和特殊颜色 */
  p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #333;
  }

::first-line

用途：选择元素内第一行文本，并对其单独应用样式。

  /* 为每个段落第一行添加特殊字体和颜色 */
  p::first-line {
    font-family: 'Georgia', serif;
    color: #999;
  }

::selection

用途：选择用户当前选中文本的范围（即鼠标拖选或键盘选中），并对其应用样式。

  /* 设置选中文本的背景色和文字颜色 */
  ::selection {
    background-color: rgba(0, 128, 255, 0..jpg);
    color: white;
  }

:targe

用途：选择当前URL片段标识符（fragment identifier，即URL中#后面的部分）与该元素id属性相匹配的元素。

  <div id="section1">
    <h2>Section 1</h2>
    <!-- content... -->
  </div>

  <div id="section2">
    <h2>Section 2</h2>
    <!-- content... -->
  </div>

  <ul>
    <li><a href="#section1">Go to Section 1</a></li>
    <li><a href="#section2">Go to Section 2</a></li>
  </ul>

  /* 当URL中包含#sectionX时，高亮相应的section */
  :target {
    background-color: lightyellow;
    border-left: 5px solid #333;
  }

:any-link

用途：选择所有未访问和已访问过的链接（<a>元素），是一个简写选择器，相当于:link, :visited的组合。

  /* 给所有链接添加下划线 */
  :any-link {
    text-decoration: underline;
  }

:link

用途：选择所有未访问过的链接（<a>元素，其href属性不是空且尚未被用户点击过的链接）。

  /* 未访问过的链接使用蓝色 */
  :link {
    color: blue;
  }

:visited

用途：选择所有已访问过的链接（用户已经点击过且浏览器记录了访问历史的<a>元素）。

  /* 已访问过的链接使用紫色 */
  :visited {
    color: purple;
  }