-
Notifications
You must be signed in to change notification settings - Fork 2
/
html5-2.html
executable file
·163 lines (146 loc) · 4.33 KB
/
html5-2.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css" media="screen">
p::first-line{
background-color:grey;
color:white;
}
p::first-letter{
background-color:green;
color:white;
border:thin black solid;
padding:4px;
}
a:before{
content:"Click here to";
}
a:after{
content:"!";
}
body{
counter-reset:paracount; /*定义计数器 counter-reset:paracount 10;指定默认值 */
}
p:before{
content:counter(paracount)". ";/*显示计数器*/
counter-increment:paracount; /*指定计数器增量 counter-increment:paracount 2;2递增*/
}
:root{
border: thin black solid;
padding:4px;
}
:first-child{
border: thin black solid;
padding:4px;
}
p > span:first-child{
border: thin black solid;
padding:4px;
}
:last-child{
border: thin green solid;
padding:4px;
}
:only-child{
border: thin red solid;
padding:4px;
}
:only-of-type{ /*唯一元素*/
border: thin blue solid;
padding:4px;
}
body > :nth-child(2){ /*选择指定索引的元素*/
border: thin #af00f0 solid;
padding:4px;
}
:enabled{
border: thin #af00f0 solid;
padding:4px;
}
:checked + span{ /*兄弟选择器*/
background-color:red;
color:white;
padding:5px;
border:medium solid black;
}
:default{
outline:medium solid red;
}
#p1 > input:invalid{ /*验证选择器*/
outline:medium solid red;
}
#p1 > input:valid{
outline:medium solid green;
}
#p2 > input:required{ /*required属性选择器*/
outline:medium solid green;
}
#p2 > input:optional{ /*无required属性选择器*/
outline:medium solid red;
}
:link{
border: thin black solid;
background-color:lightgrey;
padding:4px;
color:red;
}
:visited{
background-color:black;
color:white;
}
:hover{
border:thin red solid;
padding:4px;
}
:active{
border:thin blue solid;
padding:4px;
}
:focus{
border:thin yellow solid;
padding:4px;
}
a:not([href*="apress"]){
border:thin yellow solid;
padding:4px;
}
</style>
</head>
<body>
CSS3
<p>first-line<br/>
tow-line</p>
<p>second-line</p>
<a href="http://www.baidu.com">Visit the Apress website</a>
<br/>
<a href="http://www.baidu.com/aas.apress.com/">Visit the w3c website</a>
<br/><br/><br/>
<p>I like <span>apples</span> and <span>oranges</span></p>
<p>I like <span>apples</span> and oranges</p>
<h1>asasa</h1>
<br/><br/><br/>
<textarea>This is an enabled textarea</textarea>
<textarea disabled>This is an disabled textarea</textarea>
<br/><br/><br/>
<input type="checkbox" id="apples" name="apples">
<span>This will go red when checked</span>
<br/><br/><br/>
<form>
<div id="p1">
<input required />
<br/><br/>
<input required />
<br/><br/>
</div>
<div id="p2">
<input required />
<br/><br/>
<input />
<br/><br/>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>