5 
p{display:inline;...}
<p>Hello</p>
p::first-letter{color: red;}

我想在那个 p 上使用 ::first-letter。但它是一个内联元素，根据 W3C，它不起作用。怎么做？

4

3 回答 3

7

The :first-letter as defined in the spec http://www.w3.org/TR/CSS2/selector.html#first-letter only applies to a block element.

If you want you could use display:inline-block to make it work. Refer to http://jsfiddle.net/fZGFH/1/

于 2012-05-01T03:49:59.163 回答
2

你可以给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>

演示：- http://jsbin.com/eponir/4/edit

于 2012-05-01T04:59:41.343 回答
1

这是内联和首字母大小写的样式：

p{display:inline-block;}
p:first-letter {color:red}
于 2012-05-01T03:58:38.410 回答