Question

使用CSS选择器，我想在点击一个链接时，在div一个元素周围放一个框阴影。

    <!DOCTYPE html>
    <html>
        <body>
            <div class="container">
                <div id="selected_div">
                    <a><p id="click"></p></a>
                </div>
            </div>
        </body>
    </html>

我不知道使用哪种选择器。请赐教。

Answer 1

考虑到您希望根据点击进行操作，最好还是使用Javascript。 CSS没有父选择器，无法检测到点击。这是jQuery解决方案：

$("document").ready(function() {
  $("#selected_div a").click(function() {
    $(this).parent().css("box-shadow", "2px 2px 3px #fff");
  }
}

请记住包含jQuery库。

Answer 2

您无法根据子对象的状态设置父对象的样式（从CSS3开始）。这对JS来说是可行的，但不适用于纯CSS。

Answer 3

使用:target selector可以突出显示父元素。请查看 DEMO 。

CSS使用

:target
{
background-color: gold;
  box-shadow:2px 2px 3px #eee;
}

#selected_div
{
border:1px dashed #cecece;

}

此处使用的HTML代码。

 <div class="container">
 <div id="selected_div">
     <a href="#selected_div">
          <p id="click">Sample TEXT</p>
    </a>
  This content should be selected.

   </div>
</div>

足够的CSS选择器1嵌套元素

3 个答案: