CSS 常见伪类解析

433 words

2 minutes

CSS 常见伪类解析

2023-03-09

技术

css

/

伪类

CSS 伪类选择器表示任何处于选中状态的radio(), checkbox () 或 (“select”) 元素中的option HTML 元素 (“option”)。

用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的状态。

1
<div>
2
  <input type="radio" name="my-input" id="yes">
3
  <label for="yes">Yes</label>
4

5
  <input type="radio" name="my-input" id="no">
6
  <label for="no">No</label>
7
</div>
8

9
<div>
10
  <input type="checkbox" name="my-checkbox" id="opt-in">
11
  <label for="opt-in">Check me!</label>
12
</div>
13

14
<select name="my-select" id="fruit">
15
  <option value="opt1">Apples</option>
16
  <option value="opt2">Grapes</option>
17
  <option value="opt3">Pears</option>
18
</select>

()#

() 伪类匹配特定文字书写方向的元素。在 HTML 中，文字方向由dir属性决定。其他的文档类型可能有其他定义文字方向的方法。

值得注意的是用 CSS 伪类

() 并不等于使用 [dir=…] 属性选择器。后者匹配 dir 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， [dir=rtl] 或 [dir=ltr] 不会匹配到 dir 属性的值为 auto 的元素。而 ()会匹配经过客户端计算后的属性，不管是继承的 dir 值还是 dir 值为 auto 的。

1
<div dir="rtl">
2
  <span>test1</span>
3
  <div dir="ltr">test2
4
    <div dir="auto">עִבְרִית</div>
5
  </div>
6
</div>

(rtl) 会匹配最外层的 div，内容为test1 的 span，和有希伯来字符的 div。(ltr) 会匹配到内容为test2 的 div.

#

CSS pseudo-class 表示在一组兄弟元素中的第一个元素。

1
<div>
2
  <p>This text is selected!</p>
3
  <p>This text isn't selected.</p>
4
</div>
5

6
<div>
7
  <h2>This text isn't selected: it's not a `p`.</h2>
8
  <p>This text isn't selected.</p>
9
</div>
10

11
p:first-child {
12
  color: lime;
13
  background-color: black;
14
  padding: 5px;
15
}

#

表示一组兄弟元素中其类型的第一个元素。选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何。

1
<template>
2
  <article>
3
    <div>This `div` is first!</div>
4
    <div>This <span>nested `span` is first</span>!</div>
5
    <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
6
    <div>This <span>nested `span` gets styled</span>!</div>
7
    <b>This `b` qualifies!</b>
8
    <div>This is the final `div`.</div>
9
  </article>
10
</template>
11

12
article :first-of-type {
13
  background-color: pink;
14
}