Question

有没有办法一次将一个类添加到整个列表项集中？

而不是为每个列表项添加单个类？

CSS

<li class="foot_nav">Home</li>
<li class="foot_nav">Discovery</li>
<li class="foot_nav">Subjects</li>
<li class="foot_nav">Guide</li>
<li class="foot_nav">About us</li>

由于

Answer 1

这只是一种方式 - JS。以Jquery为例：

$('li').addClass('foot_nav');

Answer 2

只需将一个类添加到父级并使用子选择器：

.foot_nav li {
  display: inline-block;
}

<ul class="foot_nav">
  <li>Home</li>
  <li>Discovery</li>
  <li>Subjects</li>
  <li>Guide</li>
  <li>About us</li>
</ul>

Answer 3

将该类应用于整个ul，然后使用CSS

定位ul li

＆＃13;

 TypeError: 'str' object is not callable

＆＃13;

.foot_nav{list-style:none}

.foot_nav li:nth-child(even) {background:red}

.foot_nav li:nth-child(odd) {background:yellow}

＆＃13;

<ul class="foot_nav">
  <li>Home</li>
  <li>Discovery</li>
  <li>Subjects</li>
  <li>Guide</li>
  <li>About us</li>
</ul>

Answer 4

试试这个

 .list-item li{
 }

.list-item:nth-child(1){
}
.list-item:nth-child(2){
}

<ul class="list-item">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Answer 5

你需要什么？

也许您应该将该类添加到其父级。

<ul class="foot_nav">
<li></li>
…
</ul>

Answer 6

＆＃13;

.foot_nav
{
  list-style-type:none;

}
.foot_nav li
{
display:inline-block;
}

＆＃13;

<ul class="foot_nav">
<li >Home</li>
<li >Discovery</li>
<li >Subjects</li>
<li >Guide</li>
<li >About us</li>
</ul>

＆＃13;

Answer 7

JavaScript 中的类似内容应该可以解决问题：

var lis = document.querySelectorAll("li");

for(var i = 0; i < lis.length; i++){
    lis[i].className = lis[i].className += " foot_nav"
}

将所有列表项添加到单个类

7 个答案: