css - 这是我的样式表中的内容 li {display :inline; } li. vert (color :red;} How do I get li. vert to display vertically

Question

我的问题是在内联列表之后有一个垂直列表

li {display:inline;}   
li.vert (color:red;}   

如何让 li.vert 垂直显示它显示红色 OK 但内联

Answer 1

您可以使用 :not()忽略类为 .vert 的 li 元素或重置 .vert

的显示属性

使用 :not() 将样式应用到所有 li 但不是 li 类 .vert

li.vert {
  color: red
}

li:not(.vert) {
  display: inline;
}

ul.vert>li {
  display: list-item
}

<h3>mixed list</h3>
<ul>
  <li>list item </li>
  <li>list item </li>
  <li class="vert">list item </li>
  <li>list item </li>
  <li>list item </li>
  <li class="vert">list item </li>
  <li>list item</li>
</ul>


<h3>inline list</h3>
<ul>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
</ul>


<h3>vertical list</h3>
<ul>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
  <li class="vert">list item </li>
</ul>

<h3>simplified vertical list</h3>
<ul class="vert">
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
</ul>

但实际上，您应该为要修改的列表提供一个类，而不是将属性应用于所有 li 元素。

像这样

ul.foo>li {
  display: inline;
  color: red;
}

<h3>Default List</h3>
<ul>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item</li>
</ul>


<h3>modified List</h3>
<ul class="foo">
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
  <li>list item </li>
</ul>