不使用类且不修改HTML时通过CSS设置HTML样式的问题求解

不需要修改HTML结构、不需要使用HTML类选择器，通过CSS结构伪类按DOM固定位置匹配元素即可实现要求的效果，完整代码如下：

article {
  background-color: gray;
}

/* 匹配所有内容为Green的p标签，设置绿色 */
article > p:nth-child(1),
article > p:nth-child(5),
article > p:nth-child(7),
article > p:nth-child(8) {
  color: green;
}

/* 匹配Blue文本，设置蓝色 */
article > p:nth-child(2) {
  color: blue;
}

/* 匹配Red centered所在div，设置文本居中、红色 */
article > div:nth-child(3) {
  text-align: center;
}
article > div:nth-child(3) p {
  color: red;
}

/* 匹配Yellow文本，设置黄色 */
article > p:nth-child(4) {
  color: yellow;
}

/* 匹配Hidden所在div，直接隐藏内容 */
article > div:nth-child(6) {
  display: none;
}

/* 匹配Purple文本，设置紫色 */
article > p:nth-child(9) {
  color: purple;
}

/* 匹配Pink文本，设置粉色 */
article > p:nth-child(10) {
  color: pink;
}

实现逻辑说明 #

• 保留原有article灰色背景的设置
• 用子选择器>匹配article的直接子元素，配合:nth-child()按元素在父级下的固定序号定位，完全不依赖HTML中定义的class属性
• 对包裹Hidden文本的div设置display: none实现隐藏效果
• 对包裹Red centered文本的div设置text-align: center实现文字居中，内部p标签设置红色

内容的提问来源于stack exchange，提问作者Angel Arias