前端CSS,HTML的 Li 样式,需要颜色修改

需求描述
在一个列表中,序号的颜色不一样,例如 序号1:红色,需要2:绿色。上图说明

前端CSS,HTML的 Li 样式,需要颜色修改_第1张图片

如果只是普通的 HTML 或者推广页面,那你可以一个一个的去设置样式,去修改颜色,但是如果是后端返回的数据,或者接口获取的数据,那你是不可能一个一个去操作的,那么,用CSS 怎么去修改呢?话不多说,直接上代码!

DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>title>
head>
<body>
<style>
	ul {
		counter-reset: my-counter;
		list-style-type: none; 
		/*去掉原有的序号标签*/
	}
	li::before {
		content: counter(my-counter);
	    counter-increment: my-counter;
	    color: red; 
	    font-weight: bold;
	    margin-right: 5px;
	    width: 14px;
		height: 22px;
		font-size: 22px;
		font-weight: 400;
		color: #BEBEBE;
		line-height: 33px;
		letter-spacing: 1px;
	}

	li:nth-child(1)::before {
	 	width: 14px;
	    height: 22px;
	    font-size: 22px;
	    font-weight: 400;
	    color: #FF7E6E;
	    line-height: 33px;
	    letter-spacing: 1px;
	}

	li:nth-child(2)::before {
    	width: 14px;
	    height: 22px;
	    font-size: 22px;
	    font-weight: 400;
	    color: #FFD28E;
	    line-height: 33px;
	    letter-spacing: 1px;
  	}

	/*  
	*  上面的方法,是指定对应的序号,改编颜色
	*/
  	/* 设置偶数项的颜色 */
  	/*li:nth-child(2n)::before {
		color: blue; 
	}*/

	/* 设置奇数项的颜色 */
	/*li:nth-child(2n+1)::before {
    	color: green; 
  	}*/
style>

<ul>
  <li>列表项 1li>
  <li>列表项 2li>
  <li>列表项 3li>
  <li>列表项 4li>
  <li>列表项 5li>
ul>
body>
html>

成品展示

前端CSS,HTML的 Li 样式,需要颜色修改_第2张图片

前端CSS,HTML的 Li 样式,需要颜色修改_第3张图片

你可能感兴趣的:(前端学习记录,前端,css,html)