How to give same style to first 2 paragraphs differently in css_问答_开发者

How to give same style to first 2 paragraphs differently in css

开发者 https://www.devze.com 2022-12-15 02:22 出处：网络

How to give same style to first 2 paragraphs differently in css. <html> <head> <style type=\"text/css\" media=\"screen\">

相关专题：css

How to give same style to first 2 paragraphs differently in 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>

I've tried this but it's leaving first paragraph and styling all other.

and this only style first paragraph not others

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

remember I want to give same style on first 2 paragraph.

Go here, and try this code out :)

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

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

It depends on what browsers you want to be compatible with. The latest versions of Firefox, Safari, Chrome, and Opera all support the nth-of-type pseudo-element, but IE does not yet (it is a CSS 3 feature, which IE does not support much of). If you can limit yourself to these browsers, the following should work, otherwise, you'll need to use one of the solutions from one of the other answers.

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

first of all, ID's need to be unique on a page. You can't use id="hello" twice. You need to use class for that. Try:

<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>