如何在CSS中设置此列表的样式？

Question

我想知道为这样的列表设置样式的最佳方法是什么：

1

---

2

也就是说，第一个li元素（或图像＃2中的前两个元素）与其他元素不同。两个列表的内容都来自数据库，因此需要动态更新：每次我发布新内容时，它的样式都不同，然后当它发生故障时变得正常。感谢。

Answer 1

以下是各种伪类的快速示例。

Codepen示例

HTML（2个列表）

<nav class="ex-1" role='navigation'>
  <h2>Example 1</h2>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  

<nav class="ex-2"role='navigation'>
    <h2>Example 2</h2>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

<强> CSS

nav {
  margin:25px;
  width:250px;
}

li {
  list-style:none;
  background:lightblue;

}

a {
  text-decoration:none;
  color:black;
}

.ex-1 li:nth-of-type(1) {
  background: red;
}

.ex-1 li:nth-child(2) {
  background: green;
}

.ex-2 li:nth-of-type(1),
.ex-2 li:nth-of-type(2){
  background:#bada55;
}

Answer 2

我建议首先使用php或asp格式化数据，或者使用Javascript。

如果您有包含所有内容的div，可以使用GetElementsByClassName（'container_name'）设置样式。这就是它的样子。

var DivsWithClassName = document.getElementsByClassName('container_class');

for(var i = 0; i < DivsWithClassName.length; i++) {
    DivsWithClassName.className = DivsWithClassName.className + " otherclass-"+i;
    }

这让你做的是为数组中的每个元素创建一个新类，这意味着每个div或li元素都有一个通用类和唯一元素。

所以你可以拥有li .container_class img {display：none}并且有异常.otherclass-1 img {display：block}

或者你可以像其他人建议的那样去伪类。我个人更喜欢先用php或asp清理输出数据。