CSS伪类，HTML代码在线实时编辑、实时预览

index.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

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <button class="my-button">将鼠标悬停在我身上！</button>

  <button class="my-button">点击我！</button>

  <input type="text" class="my-input" placeholder="输入些什么...">

  <ul class="my-list">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
  </ul>


  <div class="container">
    <p>我是第一个段落！</p>
    <p>我只是一个普通段落。</p>
    <p>我也是！</p>
    <div>我是div</div>
  </div>

  <p lang="en">Hello, World!</p>
  <p lang="fr">Bonjour, le Monde!</p>
  <p lang="es">¡Hola, Mundo!</p>


  <div class="container-new">
  <p>我是一个段落。</p>
  <p class="special">我是一个特殊段落！</p>
  <p>我是另一个段落。</p>
  </div>
</body>

</html>

编辑器加载中

style.css

            
                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
89
90

            
            .my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: lightblue;
color: black;
}


.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: darkblue;
transform: scale(0.95);
}


.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
/*
  更灵活的写法：nth-child(n) 表达式
  nth-child 支持更复杂的公式（an + b），例如：

  nth-child(even)： 选择偶数位置;
  nth-child(2n)：等价于 even，选择偶数位置;
  nth-child(2n+1)：等价于 odd，选择奇数位置;
  nth-child(3n+1)：选择第1、4、7、10...项;
  nth-child(-n+3)：选择前3项。
*/
/* 每隔两项设置为蓝色文本 */
.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}
/* 每隔两项设置为蓝色文本 */
.my-list li:nth-child(even) {
color: blue;
}
/*
  :nth-child 基于 父元素所有子元素 的位置（包括非 <li> 元素）。
  :nth-of-type 基于 同类型元素 的位置（仅统计 <li>）。
  如果父元素中包含其他标签（如 <div>），建议使用 :nth-of-type 来避免计数错误
*/

.container p:first-child {
font-weight: bold;
color: red;
}
/* 这样会直接修改div的文本颜色 */
.container :last-child {
font-weight: bold;
color: blue;
}


p:lang(en) {
color: blue;
}

p:lang(fr) {
color: red;
}

p:lang(es) {
color: green;
}



.container-new p:not(.special) {
color: greenyellow;
}

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中