logo标签列表

如何在行内元素中使用 ::first-letter？

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

我想在这个段落上使用::first-letter 伪类。但是由于它是内联元素，根据W3C规定，它不起作用。如何解决？

6
为什么你会首先将 p 元素设为行内元素呢？ - BoltClock
3个回答
8
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

1

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

p{display:inline-block;}
p:first-letter {color:red}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接