编辑html与css，但现在的类

Question

我正在准备一个测试，其中一个主题将是使用CSS改变HTML样式，但我们不能使用HTML类或编辑HTML。

为了改变背景，我使用了文章，它选择了里面的所有东西，背景被改变了，我通过使用独生子女选择它来改变隐藏和绿色的颜色，但后来我尝试了其他的，无法做到这一点。

应该是这样的:https://clickio.gyazo.com/97fa4884c612a1653b4b3245d102eb52

article {
background-color: gray;
}
p:only-child {
color: green;
}

<article>
<p>Green</p>
<p>Blue</p>
<div>
<p>Red centered</p>
</div>
<p>Yellow</p>
<p>Green</p>
<div class="hidden">
<p>Hidden</p>
</div>
<p>Green</p>
<p>Green</p>
<p>Purple</p>
<p>Pink</p>
<hr>
</article>

Answer 1

您可以将nth-child()用于您的任务:

article {
background-color: gray;
}
article > :nth-child(1),
article > :nth-child(5),
article > :nth-child(7),
article > :nth-child(8) {
color: green;
}
article > :nth-child(2) {
color: blue;
}
article > :nth-child(4) {
color: yellow;
}
article > :nth-child(9) {
color: purple;
}
article > :nth-child(10) {
color: pink;
}
article > :nth-child(3) {
text-align: center;
color: red;
}
.hidden {
display: none;
}

<article>
<p>Green</p>
<p>Blue</p>
<div>
<p>Red centered</p>
</div>
<p>Yellow</p>
<p>Green</p>
<div class="hidden">
<p>Hidden</p>
</div>
<p>Green</p>
<p>Green</p>
<p>Purple</p>
<p>Pink</p>
<hr>
</article>

Answer 2

这与预期相当接近。

这是一个制作css选择器来处理正确的元素样式的问题。我在这里展示的演示对每个元素使用不同的css规则。当然有几种方法可以按照预期样式化文档，但这并不是最简洁的一种。顺便说一下，我主要使用以下伪选择器:

• :nth-child()
• :nth-of-type()

article {
background-color: gray;
padding-left: 1rem;
}
article > p:first-child{
color: green;
}
article > p:nth-child(2){
color: blue;  
}
article > div:nth-of-type(1){
text-align: center;  
color: red;
background: white;
width: 10rem;
height: 3rem;
}
article > p:nth-child(4){
color: yellow;
}
article > p:nth-child(5) {
color: green;
}
article > div.hidden {
display: none;
}
article > p:nth-child(7) {
color: green;
}
article > p:nth-child(8) {
color: green;
}
article > p:nth-child(9) {
color: purple;
}
article > p:nth-child(10) {
color: pink;
}

<article>
<p>Green</p>
<p>Blue</p>
<div>
<p>Red centered</p>
</div>
<p>Yellow</p>
<p>Green</p>
<div class="hidden">
<p>Hidden</p>
</div>
<p>Green</p>
<p>Green</p>
<p>Purple</p>
<p>Pink</p>
<hr>
</article>