如何在无序列表

Question

我很难搞清楚如何在无序列表中控制h2的样式。所以我的结构是这样的：

<div name="main_div">
    <ul>
        <li><h2>Hello World!</h2></li>
    </ul>
</div>

在我的CSS上，到目前为止我得到的是：

.main_div ul li h2 {color:#fff}

问题是，它不会改变h2的颜色。任何人都可以帮我这个吗？

Answer 1

<div name="main_div">

.main_div ul li h2 {color:#fff}

div个元素没有name属性 - 即使他们这样做，.main_div也不会按名称选择元素。

使用班级或ID。

Answer 2

name属性与class属性不同。有关文档，请参阅Try before buy。

here

更改为：

<div class="main_div">
    <ul>
        <li><h2>Hello World!</h2></li>
    </ul>
</div>

Answer 3

您的CSS是正确的，但您的HTML不是。使用此：

<div class="main_div">
    <ul>
        <li><h2>Hello World!</h2></li>
    </ul>
</div>

在CSS

中使用.class选择器时，仅引用Class属性

Answer 4

看看这里：Css Selectors

您需要通过name属性选择div：

＆＃13;

＆＃13;

div[name="main_div"] ul li h2 {
  color: red
}

＆＃13;

<div name="main_div">
  <ul>
    <li>
      <h2>Hello World!</h2>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

此CSS规则将针对UL元素中包含的任何h2元素。

ul h2 {
    //Your  CSS
}

ul＆gt; li使您的选择更具体，因为它只会选择包含在ul中的li元素中的元素。

ul > li h2 {
    //Your CSS
}