Question

我无法选择放置在容器中的div，该容器具有使用伪元素::在OR :: after之前定义的阴影。定义阴影后，无法选择div。

codepen“http://codepen.io/smkudale/pen/lvFCt”

我甚至尝试使用Z-index = -1，但这也不起作用。

有任何解决此问题的建议吗？

代码HTML：

<body>
<div class="content">
<a class="shadow">
<div class= "b1"></a>
</div>
<a href="www.google.com">
<div class= "b2">
</div></a>
<div class= "b3">
</div>
<div class= "b4">
</div>
<div class= "b5">
</div>
<div class= "b6">
</div>
<div class= "b7">
</div>
<div class= "b8">
</div>
<div class= "b9">
</div>
<div class= "b10">
</div>
<div class= "b11">
</div>
<div class= "b12">
</div>
</a>
 </div>
</body>

CSS

  .content
  {
  width:500px;
  height:500px;
  border-radius:500px;
  border:1px solid red;
  background:#ddd;
  margin:0 auto;
  position:relative;
  overflow:hidden;

  }

   .shadow
  {
  display:block;
  position:relative;


   }


   .shadow::before
  {
  display:block;
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  border-radius:500px;
  -moz-box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);
  -webkit-box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);  
  box-shadow:inset 0px 0px 9px 9px rgba(0,0,0,0.3);
  overflow:hidden;
  z-index:0

   }


  .b1
  {
  width:125px;
  height:125px;
  background:green;
  margin:5px 5px 5px 5px;
   display:inline-block; 
   float:left;
  }

Answer 1

您正在按顺序关闭标签。

<a class="shadow">
<div class= "b1"></a>
</div>

应该是

<a class="shadow">
<div class= "b1">
</div></a>

无法使用Pseudo元素选择具有嵌入阴影的容器中定义的div

1 个答案: