45 lines
1.2 KiB
HTML
45 lines
1.2 KiB
HTML
<html> <head>
|
|
|
|
<title> Test of Stylesheet Pseudo Elements </title>
|
|
<style>
|
|
body {font-family: serif; font-size: 150%;}
|
|
p { border: thin solid black; background-color: #eeeeee; }
|
|
|
|
p:first-line {
|
|
font-family: sans-serif;
|
|
color: green;
|
|
}
|
|
|
|
p:first-letter {
|
|
font-size: 3em;
|
|
font-weight: bold;
|
|
border: dashed thin;
|
|
}
|
|
|
|
p.floated:first-letter {float: left; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Inheritance bug for floated first-letter </h1>
|
|
|
|
<p> Here is the first paragraph. Here the CSS :first-line rule
|
|
sets the text to a green, sans-serif font. Then, the CSS :first-letter
|
|
rule sets the font size to 3em, and makes the text bold. And here's some
|
|
more text to pad out the paragraph and make things look nice (or, at least,
|
|
to illustrate the problem correctly).
|
|
</p>
|
|
|
|
<p class="floated"> Here is the second paragraph. This is just like
|
|
the first except that the rule p.floated:first-letter floats the first
|
|
letter to the left. However, this floated element should still inherit
|
|
the font properties (green and sans-serif) from the first-line: selector.
|
|
It does not -- instead, the font is black, and uses the serif font.
|
|
.... And here's some
|
|
more text ....
|
|
</p>
|
|
|
|
|
|
</body></html>
|