在有多个p标签怎么单独定义每个p标签里面的CSS属性，使用外部样式表？

html-css022

在有多个p标签怎么单独定义每个p标签里面的CSS属性，使用外部样式表？,第1张

在有多个p标签单独定义每个p标签里面的CSS属性，使用外部样式表方法：

第一种：给每个P加单独的ID或者class，然后给这些ID或者CLASS写css

第二种：借助js动态给每个P加一个不同的class，然后给这些class写css

p:nth-child(0) {第一个P}

p:nth-child(1) {第二个P}

p:nth-child(2) {第三个P}

??

实现代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>设置边框</title>

<style>

div >p:first-child{

background-color: aqua

}

div >p:nth-child(2){

background-color: blue

color: #FFFFFF

}

div >p:nth-child(3){

background-color: coral

}

div >p:nth-child(4){

background-color: fuchsia

}

</style>

</head>

<body>

<div>

<p>A</p >

<p>B</p >

<p>C</p >

<p>D</p >

</div>

</body>

</html>

很简单，css样式表中直接写就可以了。例如:

p {

font-size: 18px

}

那么凡事引入了这个样式表的css页面中，所有的p标签下的文字字号都是18像素。

当然也可以用添加类名或id重写样式，来覆盖p标签的样式。