Question

我遇到了CSS选择器的问题。我在“list Items（LI）”和“list items（LI）”中有“class”类的内容。我需要为类名为“.child”的第一个“列表项（LI）”设置样式。仅在CSS。

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
  background:red;
  width:100%;
}
li.child ~ .child{
  color:#fff;
  font-size:20px;
  background:green;
  width:10px;
}

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li class="child">
This need to be Red Color
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 1

更新您的css规则

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}

li.child{
  color:yellow;
  font-size:20px;
}
li.child ~ .child {
    color:green;
}

Answer 2

您可以尝试使用您的班级名称，然后使用其中的下一个元素.child > div

Answer 3

你想要这样，实际上你必须采取另一个<ul>，因为你并没有针对＆＃39;＆＃39;＆＃39;＆＃39;在您想要的中间，否则您可以使用:nth-child(8)而无需添加其他<ul>列表。

＆＃13;

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
}
li.child:first-child{
  color:blue;
  font-size:20px;
}

＆＃13;

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  </ul>
  <ul>
  <li class="child">
  sub
  <div>
  I want differnt styles for this.
  </div>
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
</ul>

＆＃13;

Answer 4

CSS

ul{margin:0;padding:0 32px 0 32px}
li{ color:red;}
.child{
  color:green;
  background:red;
  width:100%;
}
li.child ~ .child{
  color:#fff;
  font-size:20px;
  background:green;
  width:10px;
}

HTML

<ul>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li>hellow</li>
  <li class="child">
This need to be Red Color
  </li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li class="child">sub text</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

我为下面的指定文字找到了红色的解决方案。fiddle

<li class="child">
This need to be Red Color
  </li>

列表项的CSS选择器问题

4 个答案: