css中怎么给多个p标签添加不同的颜色？_教程

实现代码如下：

<!DOCTYPE html>

<html>

<head>

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

</div>

</body>

</html>

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

p {

font-size: 18px

}

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

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

因为“background: #00FF00”后面没有添加“”符号，浏览器将“background”解析成了“background: #00FF00 font-size:80px”，所以背景和字体大小不能同时作用。

1、新建html文档，在body标签中添加一些p标签，这时网页中将会输出p标签默认的背景颜色和字体大小：

2、为p标签设置“background”属性，属性值为颜色，这时p标签的背景颜色将会变成之前设置的颜色：

3、为p标签设置“font-size”属性，属性值为字体大小，这时p标签的字体大小将会变成之前设置的字体大小：

欢迎分享，转载请注明来源：内存溢出

css中怎么给多个p标签添加不同的颜色？