css与<ul>和<li>项目无法正常工作

时间:2016-03-25 17:11:35

标签: html css

我有一个非常奇怪的情况,我试图将基本样式应用于<ul>和他们的<li>孩子但由于某种原因它无法正常工作。

我有一个react组件,它呈现以下HTML:

<div class='header'>
    <ul class='links'>
        <li>Home</li>
        <li>Samples</li>
        <li>The collection</li>
        <li>Contact</li>
    </ul>
</div>

我的CSS文件如下所示:

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    font-family: Tahoma;
    margin: 0;
    padding: 0;

    li {
        padding: 5px;
        cursor: pointer;
        font-weight: normal;
        font-size: 16px;
    }
}

已应用<ul>上的样式,但未应用<li>上的样式。但是,如果我引用<li>以外的.links > li代码,那就是 void OnDataAvailable(object sender, WaveInEventArgs e) { if (this.InvokeRequired) { this.BeginInvoke(new EventHandler<WaveInEventArgs>(OnDataAvailable), sender, e); } else { byte[] buffer = e.Buffer; int bytesRecorded = e.BytesRecorded; int bufferIncrement = waveIn.WaveFormat.BlockAlign; for (int index = 0; index < bytesRecorded; index += bufferIncrement) { float sample32 = BitConverter.ToSingle(buffer, index); sampleAggregator.Add(sample32); } if (waveFile != null) { waveFile.Write(e.Buffer, 0, e.BytesRecorded); waveFile.Flush(); } } }

5 个答案:

答案 0 :(得分:4)

您无法像在LESS或SASS中那样在CSS中嵌套选择器。只需将您的选择器语句扩展为.links li

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    font-family: Tahoma;
    margin: 0;
    padding: 0;
}

.links li {
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
}

如果您只想定位li的直接子女.links,请使用child combinator.links > li

答案 1 :(得分:0)

请试试这个:

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    font-family: Tahoma;
    margin: 0;
    padding: 0;
}

.links > li {
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
}

答案 2 :(得分:0)

如果您需要将此样式仅应用于.link类中的li,请使用以下内容:

.links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style-type: none;
  font-family: Tahoma;
  margin: 0;
  padding: 0;
}

.links li {
  padding: 5px;
  cursor: pointer;
  font-weight: normal;
  font-size: 16px;
}

答案 3 :(得分:0)

确保您使用的是SASS,SCSS或LESS。 如果不是,请将li部分移到.links部分之外。

答案 4 :(得分:0)

CSS不允许嵌套声明,因此如果初始示例位于.css文件中,则该示例不起作用。 LESS和SASS都可以实现与您所展示的内容相近的内容 - 在https://stackoverflow.com/a/15460328/2197085答案中有一个简短的解释。