p{display:inline;...}
<p>Hello</p>
p::first-letter{color: red;}
我想在这个段落上使用::first-letter 伪类。但是由于它是内联元素,根据W3C规定,它不起作用。如何解决?
:first-letter
仅适用于块级元素。如果想要应用到其他元素上,可以使用display:inline-block
。具体实现方法可参考http://jsfiddle.net/fZGFH/1/。您可以将display:inline-block;
应用于您的p标签。
使用CSS的display:block;
和display:inline;
,我们可以将元素的属性从块级更改为内联,或者从内联更改为块级。
以下是如何实现此操作的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
p {
background:red;
display:inline-block;
}
p:first-letter
{
color:black;
font-size:50px;
}
</style>
</head>
<body>
<p>CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents. A basic CSS document is made out of rule sets. Each rule set starts with a selector, a pattern that matches elements in an HTML or XML document. The selector is followed by a block of ...</p>
</body>
</html>
这是内联和首字母大小写的样式:
p{display:inline-block;}
p:first-letter {color:red}
p
元素设为行内元素呢? - BoltClock