forked from meyerweb/css-tests
-
Notifications
You must be signed in to change notification settings - Fork 0
/
class-id.html
58 lines (49 loc) · 1.55 KB
/
class-id.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Class+ID test</title>
<style type="text/css" media="all">
/* reveal styles in modern browsers */
head {display: block; padding-bottom: 1px; margin-bottom: 2em; border-bottom: 3px double #AAA;}
style {display: block; font: small monospace; white-space: pre; padding: 0 1em 1em;
border-bottom: 1px solid #AAA; background: #F1F1F1; color: #666;}
/* testing styles follow... */
p {width: 500px;}
.test {border: 1px solid; padding: 2px;}
.test.one {font-weight: bold;}
.test.one#ex1 {color: olive;}
.test#ex3 {color: green;}
#ex2.one.test {border-width: 8px;}
#ex1.one {border-width: 6px;}
.test#ex4.two {border-width: 4px;}
.test#ex3 {border-width: 2px;}
/* the following should not have any effect because no selector matches any of the test elements */
#ex5.two, .two#ex2 {color: red !important;}
.one#ex3, #ex4.one {border-width: 20px !important;}
#ex4.one.test, #ex3.text.two {border-width: 20px !important;}
</style>
</head>
<body>
<p class="test one" id="ex1">
What's my color, weight, and border?
[test one][#ex1]
</p>
<p class="test one" id="ex2">
What's my color, weight, and border?
[test one][#ex2]
</p>
<p class="test two" id="ex3">
What's my color, weight, and border?
[test two][#ex3]
</p>
<p class="test two" id="ex4">
What's my color, weight, and border?
[test two][#ex4]
</p>
<p class="test" id="ex5">
What's my color, weight, and border?
[test][#ex5]
</p>
</body>
</html>