CSS 通过纯CSS点击更改div背景颜色

在本文中，我们将介绍如何使用纯CSS实现在点击事件中更改div背景颜色的效果。这种方法不需要使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript，仅使用CSS属性和选择器即可实现。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用:target伪类

可以使用CSS的:target伪类来实现在点击时更改div背景颜色。:target伪类匹配当前活动的链接或目标元素，我们可以根据点击的链接或目标元素来改变对应的div的样式。

下面是一个示例，点击不同的链接会分别改变背景颜色：

<style>
    .color-change {
        height: 100px;
        width: 100px;
        background-color: blue;
        transition: background-color 0.5s ease;
    }

    .color-change:target {
        background-color: red;
    }

    .link {
        display: block;
        margin-bottom: 10px;
    }
</style>

<a href="#div1" class="link">Change color to red</a>
<a href="#div2" class="link">Change color to green</a>
<a href="#div3" class="link">Change color to yellow</a>

<div id="div1" class="color-change"></div>
<div id="div2" class="color-change"></div>
<div id="div3" class="color-change"></div>

在上面的示例中，我们定义了一个.color-change类，它设置了一个蓝色的背景颜色，并使用过渡效果实现平滑的颜色变化。当点击对应的链接时，会将对应的div的id作为锚点，然后通过:target伪类来改变背景颜色。

使用:checked伪类

除了可以使用:target伪类外，我们还可以使用:checked伪类来实现在点击时更改div背景颜色。:checked伪类可以匹配被选中的复选框或单选按钮等元素，我们可以将其应用在隐藏的checkbox或radio上，然后通过标签选择器选取对应的div进行样式改变。

下面是一个示例，点击复选框会更改div的背景颜色：

<style>
    .color-change {
        height: 100px;
        width: 100px;
        background-color: blue;
        transition: background-color 0.5s ease;
    }

    #checkbox1:checked ~ #div1 {
        background-color: red;
    }

    #checkbox2:checked ~ #div2 {
        background-color: green;
    }

    #checkbox3:checked ~ #div3 {
        background-color: yellow;
    }

    .label {
        display: block;
        margin-bottom: 10px;
    }

    .checkbox {
        display: none;
    }
</style>

<label for="checkbox1" class="label">Change color to red</label>
<label for="checkbox2" class="label">Change color to green</label>
<label for="checkbox3" class="label">Change color to yellow</label>

<input type="checkbox" id="checkbox1" class="checkbox">
<input type="checkbox" id="checkbox2" class="checkbox">
<input type="checkbox" id="checkbox3" class="checkbox">

<div id="div1" class="color-change"></div>
<div id="div2" class="color-change"></div>
<div id="div3" class="color-change"></div>

在上面的示例中，我们定义了三个复选框和对应的标签。当点击标签时，相关的复选框会被选中，然后通过选择器来改变对应div的背景颜色。通过这种方式，我们可以实现在点击事件中使用纯CSS来更改div的背景颜色。

总结

通过使用:target伪类或:checked伪类，我们可以实现在点击事件中使用纯CSS来更改div的背景颜色。这种方法不需要使用https://sotoolbox.com/tag/css target="_blank" rel="nofollow">JavaScript，只需要利用CSS的选择器和属性就能达到效果。这对于一些简单的样式变化来说非常有用，但在涉及到复杂的交互和逻辑时，还是需要借助JavaScript来实现更灵活的效果。希望本文能够对你有所帮助！