-
Notifications
You must be signed in to change notification settings - Fork 0
/
css22.html
34 lines (34 loc) · 1.23 KB
/
css22.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 伪类</title>
</head>
<style>
a.link {color:#ff0000;}
a.visited {color:#00ff00;}
a.hover {color:#ff00ff;}
a.active {color:#0000ff;}
p:first-child {color:red;} /*匹配第一个 <p> 元素*/
p > i:first-child {color:blue;} /*匹配所有<p> 元素中的第一个 <i> 元素*/
q:lang(no) {quotes:"~" "~";} /*CSS - :lang 伪类*/
input:focus {background-color: yellow;}
</style>
<body>
<p><b><a href="//www.baidu.com" target="_blank">百度</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
<p> this is some text</p>
<p>this is some text</p>
<p> i am a <i>strong</i> man.</p>
<p>some text <q lang="no">a quote in a paragraph</q>some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
<form action="demo-from" method="get">
first name: <input type="text" name="fname" /><br>
last name: <input type="text" name="lname" /><br>
<input type="submit" value="submit" />
</form>
</body>
</body>
</html>