Question

我想根据我的div类使用CSS编辑页面布局。如何使用CSS选择[aside [div class =“ one]”？

HTML：

    <aside>
        <div class="one">
            <h3>What's New</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </aside>

   <aside>
        <div class="two">
            <h3>What's New</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet.</li>
            </ul>
        </div>
    </aside>

Answer 1

使用.one应该可以。

.one {
background:red;
width: 20%;
}

<aside>
  <div class="one">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

<aside>
  <div class="two">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

Answer 2

您可以同时使用.one或更安全地使用aside div.one。

这是两个例子：

.one {
  background: red;
}

<aside>
  <div class="one">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

<aside>
  <div class="two">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

aside div.one {
  background: red;
}

<aside>
  <div class="one">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

<aside>
  <div class="two">
    <h3>What's New</h3>
    <ul>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>
  </div>
</aside>

带有CSS的div类选择器

2 个答案: