Question

我有一个非常奇怪的情况，我试图将基本样式应用于<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(); } } }。

Answer 1

您无法像在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

Answer 2

请试试这个：

.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;
}

Answer 3

如果您需要将此样式仅应用于.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;
}

Answer 4

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

Answer 5

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

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

5 个答案: