阿卡不拉

Appearance

更多选择器 👌 ​

1. 结构伪类选择器 ​

结构伪类选择器允许我们根据元素在文档树中的位置来选择它们，而无需依赖特定的 class 或 id。

1.1. :first-child 和 :last-child ​

  • :first-child：选择其父元素下的第一个子元素。
  • :last-child：选择其父元素下的最后一个子元素。
html
<!-- :first-child 和 :last-child 示例 -->
<div class="parent-box">
  <p>我是第一个段落。</p>
  <p>我是中间的段落。</p>
  <p>我是最后一个段落。</p>
</div>
css
.parent-box p:first-child {
  color: #ff6b6b; /* 红色 */
  font-weight: bold;
}

.parent-box p:last-child {
  color: #4ecdc4; /* 绿色 */
  font-weight: bold;
}

1.2. :first-of-type 和 :last-of-type ​

  • :first-of-type：选择其父元素下，特定类型的第一个子元素。
  • :last-of-type：选择其父元素下，特定类型的最后一个子元素。

这与 :first-child 的区别在于，它只关心特定类型的元素。

html
<!-- :first-of-type 示例 -->
<div class="parent-box-mixed">
  <h3>这是一个标题</h3>
  <p>我是第一个段落。</p>
  <p>我是第二个段落。</p>
  <h3>这是另一个标题</h3>
</div>
css
/* p:first-child 在这里不会生效，因为第一个子元素是 h3 */
.parent-box-mixed p:first-of-type {
  background-color: #f9f9f9;
  border-left: 3px solid #f0ad4e;
  padding-left: 10px;
}

1.3. :nth-child(n) ​

  • :nth-child(n)：选择其父元素下的第 n 个子元素。n 可以是数字、关键字或公式。

关键字：

  • even：选中所有偶数位的子元素 (2, 4, 6, ...)。
  • odd：选中所有奇数位的子元素 (1, 3, 5, ...)。

公式 (an+b)：

  • n 是一个从 0 开始的计数器。
  • a 是步长。
  • b 是偏移量。
  • nth-child(2n): 选中所有偶数位元素。
  • nth-child(2n+1): 选中所有奇数位元素。
  • nth-child(n+3): 选中从第 3 个开始的所有子元素。
  • nth-child(-n+3): 选中前 3 个子元素。
html
<!-- :nth-child 示例 -->
<ul class="nth-demo-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li>
  <li>列表项 6</li>
</ul>
css
/* 选中偶数行 */
.nth-demo-list li:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选中第三个 */
.nth-demo-list li:nth-child(3) {
  font-weight: bold;
}

1.4. :nth-of-type(n) ​

  • :nth-of-type(n)：选择其父元素下，特定类型的第 n 个子元素。

:::important :nth-child vs :nth-of-type

  • :nth-child(n)：首先在所有子元素中找到第 n 个，然后检查它是否匹配你指定的类型。
  • :nth-of-type(n)：首先筛选出所有指定类型的子元素，然后从这个新集合中选择第 n 个。 :::
html
<!-- :nth-of-type 示例 -->
<div class="parent-box-mixed">
  <h3>这是一个标题</h3>
  <p>我是第一个段落。</p>
  <p>我是第二个段落。</p>
  <h3>这是另一个标题</h3>
  <p>我是第三个段落。</p>
</div>
css
/* 选中第二个 <p> 元素 */
.parent-box-mixed p:nth-of-type(2) {
  text-decoration: underline;
}

/* 如果用 nth-child(2)，会选中第一个 <p>，因为它在父元素中排第二 */
.parent-box-mixed p:nth-child(2) {
  font-style: italic;
}

2. 伪元素选择器 ​

伪元素用于为元素的特定部分设置样式，就像在文档中添加了额外的元素一样。在 CSS3 中，伪元素使用双冒号 :: 以区别于伪类。

2.1. ::first-letter ​

  • ::first-letter：选中块级元素内容中的第一个字母。常用于创建首字下沉效果。
html
<!-- ::first-letter 示例 -->
<p class="drop-cap">
  这是一个段落，我们将使用 ::first-letter
  来创建一个首字下沉的效果，让排版看起来更具设计感。
</p>
css
.drop-cap::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 0.1em;
  line-height: 1;
  color: #008c8c;
}

2.2. ::first-line ​

  • ::first-line：选中块级元素内容中的第一行。第一行的长度取决于多种因素，如元素宽度、字体大小等。
html
<!-- ::first-line 示例 -->
<p class="first-line-style">
  这段文字的第一行会有特殊的样式。当浏览器窗口大小改变时，第一行的内容可能会变化，但样式始终会应用于新的第一行。
</p>
css
.first-line-style::first-line {
  font-weight: bold;
  color: #333;
  letter-spacing: 1px;
}

2.3. ::selection ​

  • ::selection：选中用户在浏览器中用鼠标高亮选择的文本部分。

TIP

为了获得最佳的跨浏览器兼容性，建议同时提供带 -moz- 前缀的版本。

css
/* ::selection 示例 */
::selection {
  background-color: #ff6b6b;
  color: white;
}

::-moz-selection {
  /* 兼容 Firefox */
  background-color: #ff6b6b;
  color: white;
}

现在，当你用鼠标选择页面上的任何文本时，它的背景将变为红色，文字变为白色。