Question

如何在css中以不同的方式为前两段提供相同的样式。

<html>
<head>
<style type="text/css" media="screen">
p+p {color:red}
</style>
</head>
<body>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
  <p>fourth paragraph</p>
 </body>
</html>

我已经尝试过了，但是它会留下第一段并为其他所有人设计造型。

这只是第一段而不是其他的

<html>
<head>
<style type="text/css" media="screen">
p:first-child { color: blue; }
</style>
</head>
<body>
  <p>first paragraph</p>
  <p>second paragraph</p>
  <p>third paragraph</p>
  <p>fourth paragraph</p>
 </body>
</html>

记得我想在前2段给出相同的风格。

Answer 1

转到此处，尝试使用此代码：）

http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1

p:first-child
{
    color:blue;
} 
p:first-child + p
{
    color: red;
}

Answer 2

这取决于您希望与哪些浏览器兼容。最新版本的Firefox，Safari，Chrome和Opera都支持nth-of-type pseudo-element，但IE还没有（它是一个CSS 3功能，IE不支持太多）。如果您可以限制自己使用这些浏览器，则以下内容应该有效，否则，您需要使用其中一个解决方案中的一个解决方案。

p:nth-of-type(1), p:nth-of-type(2) { color: red }

Answer 3

首先，ID需要在页面上是唯一的。你不能两次使用id =“hello”。您需要使用 class 。尝试：

<html>
<head>
<style type="text/css" media="screen">
.hello { color: blue; }
</style>
</head>
<body>
  <p class="hello">first paragraph</p>
  <p class="hello">second paragraph</p>
  <p>third paragraph</p>
 </body>
</html>

如何在css中以不同的方式给出前两个段落的相同样式

3 个答案: