Question

我希望container-1 div中的每个链接都拥有属性text-decoration: underline;。如何在不更改container-5 div的链接的情况下实现此目的？

<div class="container-1">
    <div class="container-2">
        <a href="#">Link 1</a>

        <div class="container-3">
            <a href="#">Link 2</a>
        </div
    </div>

    <div class="container-4">
        <a href="#">Link 3</a>
    </div>
</div>

<div class="container-5">
    <div class="container-6">
        <a href="#">Link 4</a>

        <div class="container-7">
            <a href="#">Link 5</a>
        </div
    </div>

    <div class="container-8">
        <a href="#">Link 6</a>
    </div>
</div>

Answer 1

您选择要设置样式的链接的父div，在本例中为.container-2，并使用a选择所有链接。然后根据自己的喜好设置父div中的所有链接的样式，在本例中为属性text-decoration: underline;

链接4,5和6位于容器5中，因为您没有选择它们，所以不会设置样式。

由于默认情况下所有链接都带有下划线，因此我添加了color: red;以显示其有效。

编辑：修正了片段中的拼写错误

.container-2 a {
  text-decoration: underline;
  color: red;
}

<div class="container-1">
    <div class="container-2">
        <a href="#">Link 1</a>

        <div class="container-3">
            <a href="#">Link 2</a>
        </div
    </div>

    <div class="container-4">
        <a href="#">Link 3</a>
    </div>
</div>

<div class="container-5">
    <div class="container-6">
        <a href="#">Link 4</a>

        <div class="container-7">
            <a href="#">Link 5</a>
        </div
    </div>

    <div class="container-8">
        <a href="#">Link 6</a>
    </div>
</div>

Answer 2

使用CSS类选择器：

.container-1 a{
    text-decoration: underline;
}

另外，请先阅读this link以开始使用CSS选择器，然后阅读this one以进一步了解CSS3选择器。

如何将样式应用于具有特定类的元素？

2 个答案: