码创造者

这个屌丝很懒，什么也没留下！

热门标签

css选择器、伪类和伪元素大总结_元素选择器和伪

作者：码创造者 | 2024-08-22 02:21:27

踩

元素选择器和伪

css选择器、伪类和伪元素的大总结，希望能帮到你。

基本选择器

元素选择器 `elementname(元素名称)`

描述：css元素选择器也称为类型选择器，通过node节点名称匹配元素，元素选择器都会匹配该文档中所有该类型的元素。
语法：元素 {样式声明}

类选择器 `.classname(类名)`

描述：在一个HTML文档中，css类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与选择器中的类名完全匹配，此条样式声明才会生效。
语法：.类名 {样式声明 }
- 注意上面的语法和这条语句等价：[class~=类名]{样式声明}

ID 选择器 `#idname(ID名)`

描述：在一个HTML文档中，css ID选择器会根据该元素的ID属性中的内容匹配元素，元素ID属性名必须与选择器中的ID属性名完全匹配，此条样式声明才会生效。
语法：#id属性值 {样式声明}
- 注意上面的语法与属性选择器的这条语句等价： [id=id属性的值] {样式声明}

通配选择器 `,ns|,*|,|`

描述：在css中，一个星号(*)就是一个通配选择器，它可以匹配任意类型的HTML元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果，比如 *.warning 和 .warning 的效果完全相同。
- ns|* 会匹配ns命名空间下的所有元素
- *|* 会匹配所有命名空间下的所有元素
- |* 会匹配所有没有命名空间的元素
注意事项：不推荐使用通配选择器，因为它是性能最低的一个选择器。

属性选择器 `[属性=值]`

描述：css 属性选择器通过已经存在的属性名或属性值匹配元素。
语法：
- [attr] ：表示带有 attr 属性的元素
- [attr = value] ：表示带有 attr 属性，且属性的值为value的元素
- [attr ~= value] ：表示带有 attr 属性，且属性的值是一个以空格作为分隔的列表，其中至少有一个值为value
- [attr |= value] ：表示带有以 attr 命名的属性的元素，属性值为 value 或是以 value- 为前缀（’-'为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）
- [attr ^= value] ：表示带有 attr 属性，且属性值是以 value开头的元素
- [attr $= value] ：表示带有 attr 属性，且属性值是以 value 结尾的元素
- [attr *= value] ：表示带有 attr 属性，且属性值包含有value 的元素
- [attr operator value i] ：匹配属性值时忽略大小写
- [attr operator value s] ：匹配属性值时区分大小写,注意该属性选择器目前不适应于生产环境
注意：和js 不同，css 可以在不使用双引号的情况下直接使用带连字符的属性名

示例1：

        a {
            color: blue;
        }

        /*匹配以 # 开头的链接*/
        a[href ^= '#'] {
            background-color: gold;
        }

        /*匹配以 .org 结尾的链接*/
        a[href $= '.org'] {
            color: red;
        }

        /*匹配包含example的链接*/
        a[href *= 'example'] {
            background-color: silver;
        }

        /*匹配包含 insensitive 的链接，不区分大小写*/
        a[href *= 'insensitive' i] {
            color: cyan;
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

html

<ul>
    <li><a href="#internal">Internal link</a></li>
    <li><a href="http://example.com">Example link</a></li>
    <li><a href="#InSensitive">Insensitive internal link</a></li>
    <li><a href="http://example.org">Example org link</a></li>
</ul>
1
2
3
4
5
6

示例2：

    /*匹配包含 lang 属性的div*/
    div[lang] {
        font-weight: bold;
    }

    /*匹配包含 lang 属性的值中有'en-us'项的 div*/
    div[lang ~= "en-us" ] {
        color: blue;
    }

    /*匹配包含 lang 属性的值为'pt'的 div*/
    div[lang="pt"] {
        color: green;
    }

    /* 将所有语言为中文的 <div> 元素的文本颜色设为红色
无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
    div[lang|="zh"] {
        color: red;
    }

    /* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 */
    /* 备注: 和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */
    div[data-lang="zh-TW"] {
        color: purple;
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

html

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
1
2
3
4
5

组合选择器

相邻兄弟选择器 `A + B`

描述：相邻兄弟选择器 + 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是同一个父元素的子元素，则第二个元素将被选中。
语法：former_element + target_element { style properties }

示例：

li:first-of-type + li {
    color: red;
}
1
2
3

html

<ul>
    <li>One</li>
    <li>Two!</li>
    <li>Three</li>
</ul>
1
2
3
4
5

普通兄弟选择器 `A ~ B`

描述：兄弟选择符，位置无须紧邻，只须同级，A~B 选择A元素之后所有同级B元素
语法：former_element ~ target_element { style properties }

示例：

p ~ span {
    color: red;
}
1
2
3

html

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
1
2
3
4

子选择器 `A > B`

描述：当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代的第二个元素。
语法：元素1 > 元素2 {样式声明 }

示例：

div > span {
    color: red;
}
1
2
3

html

<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>
1
2
3
4
5
6

后代选择器 `A B`

描述：当使用后代选择器连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有的第二个元素（后代元素）。
语法：元素1 元素2 {样式声明 }

示例：

div span {
    color: red;
}
1
2
3

html

<div>
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>
1
2
3
4
5
6

伪类

`:active`

描述：
- :active CSS 伪类通常匹配被用户激活的元素，它让页面能在浏览器监测到激活时给出反馈。:active伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTMl 元素。
- 这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link, :hover 和 :visited。为了正常加上样式，需要把 :active 样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序 :link - :visited - :hover - :active
语法：:active {样式声明}

示例：

body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */
1
2
3
4
5

html

<h1>:active CSS选择器示例</h1>
<p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="#">Mozilla Developer Network</a>.</p>
1
2

`:checked`

描述：:checked选择器表示任何出于选中状态的 radio、 checkbox 或 select 元素中的 option html 元素
语法： :checked {样式声明}

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:checked+label {
            color: red;
        }
        input[type="radio"]:checked {
            box-shadow: 0 0 0 2px green;
        }
        input[type="checkbox"]:checked {
            box-shadow: 0 0 0 2px hotpink;
        }
        option:checked {
            box-shadow: 0 0 0 2px green;
            color: red;
        }

    </style>
</head>
<body>
<div>
    <input type="radio" name="my-input" id="yes">
    <label for="yes">Yes</label>

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

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

<select name="my-select" id="fruit">
    <option value="opt1">Apples</option>
    <option value="opt2">Grapes</option>
    <option value="opt3">Pears</option>
</select>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

`:default`

描述: :default 选择器表示默认选中的表单元素。该选择器可以在 button、 checkbox 、radio 以及 option 元素上使用
语法: :default {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:checked + label {
            color: coral;
        }
        input[type="radio"]:default {
            box-shadow: 0 0 1px 2px coral;
        }
    </style>
</head>
<body>
<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`:define`

描述: :define 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素（例如通过CustomElementRegistry.define() 方法）
语法: :defined {样式声明}

`:disabled`

描述: :disabled 表示任何被禁用的元素
语法: 元素:disabled {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:disabled {
            background-color: green;
        }
    </style>
</head>
<body>
<input type="text">
<input type="text" disabled>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

`:empty`

描述: :empty 表示没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。
语法: :empty {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            background: pink;
            height: 80px;
            margin: 20px;
            width: 80px;
        }

        .box:empty {
            background: green;
        }
    </style>
</head>
<body>
<div class="box"><!-- I will be lime --></div>
<div class="box">I will be pink</div>
<div class="box">
    <!-- I will be red because of the whitespace around this comment -->
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

`:enabled`

描述: : 表示任何启用的元素。元素还有一个禁用的状态(disabled)
语法: :enabled {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:enabled {
            background-color: #22aa22;
        }
        input:disabled {
            background-color: #d9d9d9;
        }
    </style>
</head>
<body>
<form action="url_of_form">
    <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
    <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
    <input type="submit" value="Submit" />
</form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`:first-child`

描述: :first-child 表示一组兄弟元素中的第一个元素
语法: :first-child {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        P:first-child {
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <p>This text is selected!</p>
    <p>This text isn't selected.</p>
</div>

<div>
    <h2>This text isn't selected: it's not a `p`.</h2>
    <p>This text isn't selected.</p>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

`:first-of-type`

描述: :first-of-type 表示一组兄弟元素中其类型的第一个元素
语法: :first-of-type {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-of-type {
            color: red;
        }
    </style>
</head>
<body>
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 1</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

`:focus`

描述: :focus 表示获得焦点的元素（如表单输入）
语法: :focus {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:focus {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<input type="text"><br>
<input type="text">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

`:focus-within`

描述: :focus-within 表示获得焦点的元素，或者有后代元素获得焦点的元素。
- 该选择器非常实用。举个通俗的例子：表单中的某个 <input>字段获得焦点时，整个表单都可以被高亮。
语法: :focus-within {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form:focus-within {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<form>
    <label for="given_name">Given Name:</label>
    <input id="given_name" type="text">
    <br>
    <label for="family_name">Family Name:</label>
    <input id="family_name" type="text">
</form>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

`:hover`

描述: :hover 实用于用户使用设备虚指一个元素（没有激活它）的情况，如鼠标指针移动到超链接上。这个样式会被任何与链接相关的伪类重写，像 :link、 :visited 和 :active 等。为了确保生效，:hover 规则需要放在 :link 和 :visited 规则之后，但是 :active规则之前，按照LVHA 的顺序声明 :link-:visited-:hover-:active
语法: :hover {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:hover {
            color: red;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

`:in-range`

描述: :in-range 表示一个input元素，其当前值在min和max限定范围内。
语法: :in-range {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:in-range {
            background-color: rgba(111, 200, 130, 0.5);
        }

        input:in-range + label::before {
            content: '有';
        }

        input:out-of-range {
            background-color: rgba(200, 0, 0, 0.5);
        }

        input:out-of-range + label::before {
            content: '无';
        }
    </style>
</head>
<body>
<input id="range" max="10" min="0" type="number">
<label for="range">效值</label>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

`:out-of-range`

描述: :out-of-range 表示一个input元素，其当前值超出min和max限定范围内
语法: :out-of-range {样式声明}

示例:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            input:in-range {
                background-color: rgba(111, 200, 130, 0.5);
            }
    
            input:in-range + label::before {
                content: '有';
            }
    
            input:out-of-range {
                background-color: rgba(200, 0, 0, 0.5);
            }
    
            input:out-of-range + label::before {
                content: '无';
            }
        </style>
    </head>
    <body>
    <input id="range" max="10" min="0" type="number">
    <label for="range">效值</label>
    </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

`:invalid`

描述: :invalid 表示任何未通过验证的input或其他form元素
- 这个伪类对于突出显示用户的字段错误非常有用
语法: :invalid {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:invalid {
            background-color: rgba(200,0,0,.25);
        }
    </style>
</head>
<body>
<input type="email" id="email" required>
<label for="email">邮箱</label>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

`:lang()`

描述: :lang() 基于元素语言来匹配页面元素
- 在HTML中，语言是通过 lang属性，和meta元素的组合来确定的，也可能是通过协议的信息来确定。
语法: :lang(language-code)

示例:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      :lang(en) > q {
          quotes: '\201C' '\201D' '\2018' '\2019';
      }

      :lang(fr) > q {
          quotes: '« ' ' »';
      }

      :lang(de) > q {
          quotes: '»' '«' '\2039' '\203A';
      }
  </style>
</head>
<body>
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

`:last-child`

描述: :last-child 表示一组兄弟元素中的最后一个元素
语法: :last-child {样式声明}

示例:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      li:last-child {
          background-color: green;
          color: #fff;
      }
  </style>
</head>
<body>
<ul>
  <li>此元素背景色不是lime</li>
  <li>我的也不是lime。</li>
  <li>我的才是lime！ :)</li>
</ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

`:last-of-type`

描述: :last-of-type 表示一组兄弟元素中的某类型元素的最后一个
语法: :last-of-type {样式声明}

示例:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      p em:last-of-type {
          color: lime;
      }
  </style>
</head>
<body>
<p>
  <em>我没有颜色 :(</em><br>
  <strong>我没有颜色 :(</strong><br>
  <em>我有颜色 :D</em><br>
  <strong>我也没有颜色 :(</strong><br>
</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

`:link`

描述: :link 选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
语法: :link {样式声明}

示例:

 body { background-color: #ffffc9 }
 a:link { color: blue } /* 未访问链接 */
 a:visited { color: purple } /* 已访问链接 */
 a:hover { font-weight: bold } /* 用户鼠标悬停 */
 a:active { color: lime } /* 激活链接 */
<h1>:active CSS选择器示例</h1>
<p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="#">Mozilla Developer Network</a>.</p>
1
2
3
4
5
6
7

`:not`

描述: :not 选择器用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类。
语法: :not()伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或伪元素。

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:not(.fancy) {
            background-color: rgba(0, 255, 0, 1);
        }

        body:not(p) {
            color: rgba(150, 0, 0, .5);
        }
    </style>
</head>
<body>
<p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我「不是」一个段落。</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

`:nth-child(an+b)`

描述: :nth-child(an+b) 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3…)
语法: :nth-child(an+b) {样式声明}
选择器示例：
- tr:nth-child(2n+1):匹配表格中的奇数行
- tr:nth-child(odd):匹配表格中的奇数行
- tr:nth-child(2n):匹配表格中的偶数行
- tr:nth-child(even):匹配表格中的偶数行
- span:nth-child(0n+1):匹配表示一组兄弟元素中的第一个，且为span的元素
- span:nth-child(1):匹配表示一组兄弟元素中的第一个，且为span的元素
- span:nth-child(-n+3):匹配表示一组兄弟元素中的前三个，且为span的元素

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border-spacing: 0; /*清除*/
            border-left: 1px solid #999999;
            border-top: 1px solid #999999;
            margin: 16px auto;
            width: 300px;
        }

        th {
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            padding: 8px 0;
        }

        td {
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            padding: 8px 0;
        }

        tr:nth-child(2n+1) {
            background-color: rgba(166, 221, 53, 0.70);
        }

        tr:nth-child(2n) {
            background-color: rgba(237, 237, 237, 0.86);
        }

        thead tr:nth-child(0n+1) {
            background-color: rgba(39, 153, 144, 0.91);
        }

        tr:hover {
            background-color: rgba(226, 167, 0, 0.82);
        }


    </style>
</head>
<body>
<table>
    <caption>日期</caption>
    <thead>
    <tr>
        <th>年</th>
        <th>月</th>
        <th>日</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

`:nth-last-child(an+b)`

描述: :nth-last-child(an+b) 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从最后开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3…)
语法: :nth-last-child(an+b) {样式声明}
选择器示例：
- tr:nth-last-child(odd) or tr:nth-last-child(2n+1) 表示HTML表的倒数的奇数行：1、3、5等
- tr:nth-last-child(even) or tr:nth-last-child(2n) 表示HTML表的倒数偶数行：2、4、等
- :nth-last-child(7) 表示倒数的第7个元素
- :nth-last-child(-n+3) 表示一组兄弟节点中的最后三个元素。

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:nth-last-child(2n+1) {
            background-color: yellowgreen;
        }
        li:nth-last-child(4) {
            color: red;
        }

    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

描述: :nth-last-of-type(an+b) 选择器首先找到当前所有同类型的兄弟元素，然后按照位置先后顺序从最后开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3…)。
语法: :nth-last-of-type(an+b) {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-last-of-type(1) {
            color: red;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

描述: :nth-of-type(an+b) 选择器首先找到当前所有同类型的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为表达式an+b匹配到的元素集合。（n=0,1,2,3…)。
语法: :nth-of-type(an+b) {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:nth-of-type(3) {
            background-color: red;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

`:only-child`

描述: :only-child 匹配没有任何兄弟元素的元素
语法: :only-child {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:only-child {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div>
    <p>谷歌</p>
</div>
<div>
    <p>搜狗</p>
    <p>百度</p>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

`:only-of-type`

描述: :only-of-type 表示了任意一个元素，这个元素没有其他同类型的兄弟元素
语法: 父元素 :only-of-type {样式声明}
注意：父元素要与:only-of-type之间留一个空格，没有空格会全部选择中。

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        main :only-of-type {
            color: red;
        }
    </style>
</head>
<body>
<main>
    <div>I am `div` #1.</div>
    <p>I am the only `p` among my siblings.</p>
    <div>I am `div` #2.</div>
    <div>I am `div` #3.
        <i>I am the only `i` child.</i>
        <em>I am `em` #1.</em>
        <em>I am `em` #2.</em>
    </div>
</main>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

`:optional`

描述: :optional 表示任意没有 required 属性的 <input> 、<select> 或 <textarea> 元素。
语法: :optional {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:optional {
            background-color: rgba(0, 128, 0, 0.58);
        }
    </style>
</head>
<body>
<input type="text"><br>
<input type="text" required><br>
<input type="text">
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

`:read-only`

描述: :read-only 表示不可编辑的元素
语法: :read-only {样式声明}
注意：read-only 选择器不只是选者具有 readonly 属性的 input元素，它也会选择所有的不能被用户编辑的元素。

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:read-only {
            background-color: rgba(189, 189, 189, 0.38);
        }

        p:read-only {
            background-color: rgba(189, 189, 189, 0.38);
        }
    </style>
</head>
<body>
<input type="text"><br>
<input type="text" readonly>
<p>祖国很美</p>
<p contenteditable="true">祖国很美</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`:read-write`

描述: :read-write 表示可以被用户编辑的元素
语法: :read-write {样式声明}
注意：这个选择器不仅仅选择input元素，它也会选择所有可以被用户编辑的元素，例如设置了 contenteditable 属性的 p 元素。

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:read-write {
            background-color: rgba(189, 189, 189, 0.38);
        }

        p:read-write {
            background-color: rgba(189, 189, 189, 0.38);
        }
    </style>
</head>
<body>
<input type="text"><br>
<input type="text" readonly>
<p>祖国很美</p>
<p contenteditable="true">祖国很美</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`:required`

描述: :required 表示具有 required 属性的input 或 textarea 元素
语法: :required {样式声明}

示例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:required {
            color: rgba(92, 103, 103, 0.9);
        }

        input:required + span::before {
            content: '*';
            color: red;
        }
    </style>
</head>
<body>
<input type="text" required><span></span><br>
<input type="text">
<p>世界很美好，我想去看看</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

`:root`

描述: :root 表示文档数的根元素。对于HTML来说，:root表示 <html>元素，除了优先级更高外，与html元素选择器相同。
语法: :root {样式声明}

`:scope`

描述: :scope 表示要匹配的参考点的元素
语法: :scope {样式声明}
注意：在样式表中使用时，:scope 等效于 :root,因为目前尚无一种方法来显示建立作用域元素。当从DOM API使用，:scope匹配你调用API的元素。

示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="person">
    <p>李四</p>
</div>
</body>
<script>
    (function () {
        const div = document.querySelector('#person');
        const person = document.querySelector(':scope p');
        console.log(person);  //=>  <p>李四</p>
    })();
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

`:target`

描述: :target 表示一个唯一的页面元素（目标元素），其id与当前URL片段匹配
语法: :target {样式声明}
用法：
- :target 伪类可用于加亮显示页面中从超链接链接到的部分。
- 可以不使用任何JavaScript代码，只使用 :target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其 display以便显示它们。

示例1:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            color: rgba(0, 0, 135, 0.8);
            text-decoration: none;
        }
        a:hover {
            color: #e61f06;
        }

        P:target {
            background-color: goldenrod;
        }

        p:target::before {
            content: "→";
            color: #ffffff;
            font-size: 16px;
            margin-right: .5rem;
        }
    </style>
</head>
<body>
<h2>内容列表</h2>
<ol>
    <li><a href="#p1">前往第一段文字</a></li>
    <li><a href="#p2">前往第二段文字</a></li>
    <li><a href="#nowhere">这个超链接不前往任何地方，因为目标不存在</a></li>
</ol>

<h2>我的文章</h2>
<p id="p1">:target 伪类可用于加亮显示页面中可从表格内容中链接到的部分。</p>
<p id="p2">你可以不使用任何Javascript代码，只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其display 以便显示它们。</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

示例2:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*关闭弹窗*/
        .popBox {
            display: none;
        }

        /*打开弹窗*/
        .popBox:target {
            align-items: center;
            display: flex;
            justify-content: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        /*设置弹窗内容*/
        .popBox .con {
            background-color: rgba(250, 188, 199, 0.76);
            border-radius: 5px;
            padding: 1.5rem;
            position: relative;
            width: 25rem;
        }

        /*关闭按钮*/
        .popBox .close {
            display: block;
            position: relative;
        }

        .popBox .close::after {
            align-items: center;
            color: white;
            content: "×";
            cursor: pointer;
            background-color: rgba(79, 79, 79, 0.9);
            border-radius: 50%;
            display: flex;
            font-size: 1.25rem;
            justify-content: center;
            position: absolute;
            right: -2.5rem;
            top: -2.5rem;
            height: 2rem;
            width: 2rem;
            z-index: 2;
        }

        /*弹窗遮罩层*/
        .popBox::before {
            content: "";
            cursor: default;
            background-color: rgba(173, 173, 173, 0.66);
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#example1">案例1</a></li>
    <li><a href="#example2">案例2</a></li>
</ul>

<article class="popBox" id="example1">
    <div class="con">
        <a href="#" class="close"></a>
        <p>案例，就是人们在生产生活当中所经历的典型的富有多种意义的事件陈述。它是人们所经历的故事当中的有意截取。案例一般包括三大要素。案例对于人们的学习、研究、生活借鉴等具有重要意义。基于案例的教学是通过案例向人们传递有针对性的教育意义的有效载体。</p>
    </div>
</article>

<article class="popBox" id="example2">
    <div class="con">
        <a href="#" class="close"></a>
        <p>A case is a typical multi-meaning event statement that people experience in production and life. It is a deliberate interception of the stories people experience. Cases generally include three major elements. Cases are of great significance to people's learning, research, and life reference. Case-based teaching is an effective carrier to convey targeted educational significance to people through cases.</p>
    </div>
</article>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

`:valid`

描述: :valid 表示内容验证正确的 input 或其他 from 元素
语法: :valid {样式声明}

示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input:valid {
            color: #88b52c;
        }
        input:invalid {
            color: rgb(209, 0, 0);
        }
    </style>
</head>
<body>
<input type="email"><br>
<input type="email"><br>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

`:visited`

描述: :visited 表示用户已访问过的链接。出于隐私原因，可以使用该选者器修改的样式非常有限。
语法: :visited {样式声明}

伪元素

`::after`

描述：::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
语法：
- css2: :after {样式声明}
- css3: ::after {样式声明}
注意：
- ::after表示法是在css3中引入的， ::符号是用来区分伪类和伪元素的。支持css3的浏览器同时也都支持css2中引入的表示法 :after
- IE8仅支持 :after

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p::after {
            content: " → 真的很无聊！";
            color: gold;
        }
    </style>
</head>
<body>
<p>这是些无聊的事</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

`::before`

描述：::before 创建一个伪元素，作为已选中元素的第一个子元素。通常通过 content属性来为该元素添加装饰性的内容。此元素默认为行内元素。
语法：
- css2: :before {样式声明}
- css3： ::before {样式声明}
注意：
- 由 ::before 和 ::after 生成的伪元素包含在元素格式框内，因此不能用在替换元素上，比如 <img> 或 <br>元素。
- css3引入 ::before 是为了将伪类和伪元素区别开来。浏览器也接受有css2引入的 :before 写法
- IE8 仅支持 :before

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        q::before {
            content: "<<";
            color: #88b52c;
        }

        q::after {
            content: ">>";
            color: #88b52c;
        }
    </style>
</head>
<body>
<q>一些引用</q>
他说：
<q>有比没有好</q>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

`::cue`

描述：::cue伪元素匹配所选元素中的 webVTT 提示。这可以用于VTT轨道的媒体中使用字幕和其他线索。
语法：
- css2: :cue {样式声明}
- css3： ::cue {样式声明}

`::first-letter`

描述： ::first-letter会选中某个块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）
语法：
- css2: :first-letter {样式声明}
- css3： ::first-letter {样式声明}
注意：
- css3引入 ::first-letter 是为了将伪类和伪元素区别开来。浏览器也接受有css2引入的 :first-letter 写法
- IE8 仅支持 :first-letter

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p::first-letter {
            color: red;
            font-size: 1.25rem;
        }
    </style>
</head>
<body>
<p>实际开发中常常少不了使用弹窗，在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。使用CSS3实现带遮罩层可关闭的弹窗需要用到 :target伪类，::before 、::after伪元素。</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13

`::first-line`

描述： ::first-line会选中某个块级元素第一行应用样式。
语法：
- css2: :first-line {样式声明}
- css3： ::first-line {样式声明}
注意：
- css3引入 ::first-line 是为了将伪类和伪元素区别开来。浏览器也接受有css2引入的 :first-line 写法
- IE8 仅支持 :first-line

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            margin: 1rem auto;
            width: 20rem;
        }

        P::first-line {
            color: red;
            font-size: 1.25rem;
        }
    </style>
</head>
<body>
<p>实际开发中常常少不了使用弹窗，在学习css3的时候我发现可以通过纯css实现带遮罩层可关闭的弹窗。使用CSS3实现带遮罩层可关闭的弹窗需要用到 :target伪类，::before 、::after伪元素。</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

`::selection`

描述： ::selection应用于文档中被用户高亮的部分（比如使用鼠标或其他选者设备选中的部分）
语法： ::selection {样式声明}

示例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中的文本是绿底，白字*/
        p::selection {
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/1014382

css选择器、伪类和伪元素大总结_元素选择器和伪

基本选择器

元素选择器 elementname(元素名称)

类选择器 .classname(类名)

ID 选择器 #idname(ID名)

通配选择器 *,ns|*,*|*,|*

属性选择器 [属性=值]

组合选择器

相邻兄弟选择器 A + B

普通兄弟选择器 A ~ B

子选择器 A > B

后代选择器 A B

伪类

:active

:checked

:default

:define

:disabled

:empty

:enabled

:first-child

:first-of-type

:focus

:focus-within

:hover

:in-range

:out-of-range

:invalid

:lang()

:last-child

:last-of-type

:link

:not

:nth-child(an+b)

:nth-last-child(an+b)

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

:nth-of-type(an+b)

:only-child

:only-of-type

:optional

:read-only

:read-write

:required

:root

:scope

:target

:valid

:visited

伪元素

::after

::before

::cue

::first-letter

::first-line

::selection