html - :nth-child not working with list-style:none;

标签 html css twitter-bootstrap twitter-bootstrap-3

我正在制作一个播放列表。我希望这些歌曲出现在条纹列表中。

为此，我使用了这个 css 

.track-list > ul > li{
  list-style: none;

}    

div ul li:nth-child(even) {
       background-color: #ccc;
    }

这根本不起作用，但下面的代码可以工作。

  .track-list > ul > li{
  list-style: none;

}
    div ul li:nth-child(even) {
      color: #ccc;
    }

但是如果我删除 .track-list > ul > li{list-style: none;} 

div ul li:nth-child(even) {
   background-color: #ccc;
}

工作正常。

这是我的浏览器的屏幕截图 screenshot

这让我很困惑，欢迎提出建议

全屏运行代码片段以查看问题，背景颜色将消失

@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.wrapper{
  height: 100vh;
}

.box-item{
  position: relative;
  width: 100%;
  background-color: red;
  color: blue;
  height: 10vh;
  margin-top: 40px;

}

footer > .listen{
  position: absolute;
  margin-right: 20px;
  bottom: 0;
  right: 0;
}

.playlist-dropdown{
  border: solid 1px #dedede;
}

.interface{
  border-bottom: solid 3px #dedede;
  padding-bottom: 10px;
  padding-top:10px;
}
.name-of-song{
  margin-bottom: 10px;
}

.track-list{
   padding-top: 10px;
}

.track-list > ul > li{
  list-style: none;

}

div ul li:nth-child(even) {
   background-color: #ccc !important;
}



#play, #pause, #mute, #unmute {
  position: relative;
   display: block;
}

#play {
    position: absolute;

}

#pause:before {
    position: absolute;

}

#pause:after {
    position: absolute;

}



#mute{
    position: absolute;

}

#unmute:before {
    position: absolute;

}

#unmute:after {
    position: absolute;
    
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>playlist</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

     <div class="wrapper">
       <div class="container">
         <div class="box-item ">
           <footer>
             <a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
           </footer>
         </div>

        <div id="playlist-collapse" class="playlist-dropdown">
          <div class="interface clearfix">

            <div class="col-md-12 name-of-song">
              Name of track being played
            </div>
              <div class="col-md-2">
                <a href="#" id="play"><span class="glyphicon glyphicon-play"></span></a>
              <a href="#" id="pause" style="display: none;"><span class="glyphicon glyphicon-pause"></span></a>
              </div>
              <div class="col-md-6">
                progress bar
              </div>
              <div class="col-md-1">
                <a href="#" id="mute"><span class="glyphicon glyphicon-volume-off"></span></a>
              <a href="#" id="unmute" style="display: none;"><span class="glyphicon glyphicon-volume-up"></span></a>
              </div>
              <div class="col-md-3">
                volume-bar
              </div>

          </div> <!--interface ends -->
          <div class="track-list clearfix">
          <ul>
            <li class="track-row">
              <div class="col-md-2 track-number">
                01
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name
              </div>
              <div class="col-md-1 track-copyright">
                	&copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                02
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name 02
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                03
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name03
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
          </ul>
        </div>


     </div>

   </div><!--container-->

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
$('#play').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});

$('#unmute').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#mute').show();
    $('#unmute').hide();
});

$('#mute').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#mute').hide();
    $('#unmute').show();
});
</script>
 </div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

最佳答案

问题出在 float 上。 li 正在折叠 (height:0)，因为在内部您使用的是 col-* 类，而没有 row。您需要考虑 row 以便正确清除 float 元素(col-*)，然后清除 container 内的 row获得正确的边距 ( https://getbootstrap.com/docs/3.3/css/#grid )

@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.wrapper{
  height: 100vh;
}

.box-item{
  position: relative;
  width: 100%;
  background-color: red;
  color: blue;
  height: 10vh;
  margin-top: 40px;

}

footer > .listen{
  position: absolute;
  margin-right: 20px;
  bottom: 0;
  right: 0;
}

.playlist-dropdown{
  border: solid 1px #dedede;
}

.interface{
  border-bottom: solid 3px #dedede;
  padding-bottom: 10px;
  padding-top:10px;
}
.name-of-song{
  margin-bottom: 10px;
}

.track-list{
   padding-top: 10px;
}

.track-list > ul > li{
  list-style: none;

}

div ul li:nth-child(even) {
   background-color: #ccc !important;
}



#play, #pause, #mute, #unmute {
  position: relative;
   display: block;
}

#play {
    position: absolute;

}

#pause:before {
    position: absolute;

}

#pause:after {
    position: absolute;

}



#mute{
    position: absolute;

}

#unmute:before {
    position: absolute;

}

#unmute:after {
    position: absolute;
    
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>playlist</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

     <div class="wrapper">
       <div class="container">
         <div class="box-item ">
           <footer>
             <a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
           </footer>
         </div>

        <div id="playlist-collapse" class="playlist-dropdown">
          <div class="interface clearfix">

            <div class="col-md-12 name-of-song">
              Name of track being played
            </div>
              <div class="col-md-2">
                <a href="#" id="play"><span class="glyphicon glyphicon-play"></span></a>
              <a href="#" id="pause" style="display: none;"><span class="glyphicon glyphicon-pause"></span></a>
              </div>
              <div class="col-md-6">
                progress bar
              </div>
              <div class="col-md-1">
                <a href="#" id="mute"><span class="glyphicon glyphicon-volume-off"></span></a>
              <a href="#" id="unmute" style="display: none;"><span class="glyphicon glyphicon-volume-up"></span></a>
              </div>
              <div class="col-md-3">
                volume-bar
              </div>

          </div> <!--interface ends -->
          <div class="track-list clearfix">
          <ul class="container-fluid">
            <li class="track-row row">
              <div class="col-md-2 track-number">
                01
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name
              </div>
              <div class="col-md-1 track-copyright">
                	&copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li class="row">
              <div class="col-md-2 track-number">
                02
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name 02
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li class="row">
              <div class="col-md-2 track-number">
                03
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name03
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
          </ul>
        </div>


     </div>

   </div><!--container-->

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
$('#play').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});

$('#unmute').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#mute').show();
    $('#unmute').hide();
});

$('#mute').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#mute').hide();
    $('#unmute').show();
});
</script>
 </div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

为什么list-style会影响这个？

当 list-style 与 none 不同时，我们有向 li 元素添加默认高度的元素符号，即使该元素为空或包含没有clearfix的 float 元素。使用 none 将删除此高度，我们会遇到问题:

ul {
  border: 1px solid;
}

span {
  float: left;
}

li:nth-child(even) {
  background: red;
  color: blue;
}
<ul>
  <li>element 1</li>
  <li></li>
  <li>element 3</li>
</ul>

<ul style="list-style:none">
  <li>element 1</li>
  <li></li>
  <li>element 3</li>
</ul>

<ul>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
</ul>

<ul style="list-style:none">
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
</ul>

关于html - :nth-child not working with list-style:none;，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52359015/

上一篇：javascript - 根据下拉选择添加 Bootstrap 字段

下一篇：javascript - 刷新或提交表单后显示页面的特定部分

相关文章：

html - 如何添加透明边框？

twitter-bootstrap - 如何使用 Bootstrap 4 在 div 中居中对齐图像？

HTML、CSS - 调整窗口大小时的空白

javascript - 如何在 C# .net 中将 .aspx 页面另存为 html 文件时绘制动态 JQ 图

css - tablesorter中bootstrap主题有less文件吗？

html - 在 Outlook 中 <table> 忽略边框的内联样式

javascript - 带多点触控登录的主页

javascript - THREE.JS - 如何在调整窗口大小时保持场景的完整性？

html - 以边距 :auto 将元素定位在 div 的左侧和右侧

html - 如何将图像并排放置？

©2024 IT工具网  联系我们