Question

我真的很困惑，为什么不能通过说

在span标签内选择<a>

 ul li a:hover span:first-child:before{
  top: -10px;
 left: -10px;
  opacity: 1; }

这是我昨天发布的类似问题，但有一点不同。

昨天，我想尝试的div不是孩子div，但是现在span是<a>标记的孩子。我将不胜感激。

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center ul {
  margin: 0;
  padding: 0;
}

.center ul li {
  list-style: none;
  display: inline-block;
  padding: 10px;
  position: relative;
  margin: 5px;
  font-size: 20px;
  position: relative;
}

.center ul li a {
  text-decoration: none;
  color: white;
}

ul li a:hover span:first-child:before {
  top: -10px;
  left: -10px;
  opacity: 1;
}

.center ul li a span:first-child::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-top: 5px solid black;
  border-left: 5px solid black;
  top: 0px;
  left: 0;
  opacity: 0.4;
  transition: .6s;
}

.center ul li a span:first-child::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-top: 5px solid black;
  border-right: 5px solid black;
  top: 0px;
  right: 0;
  opacity: 0.4;
  transition: .6s;
}

.center ul li a span:last-child::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-left: 5px solid black;
  border-bottom: 5px solid black;
  bottom: 0px;
  left: 0;
  opacity: 0.4;
  transition: .6s;
}

.center ul li a span:last-child::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  bottom: 0px;
  right: 0;
  opacity: 0.4;
  transition: .6s;
}

<div class="center">
  <ul>
    <li><a href="#">HOME <span></span><span></span></a></li>
    <li><a href="#">MENU <span></span><span></span></a></li>
    <li><a href="#">CONTACT <span></span><span></span></a></li>
    <li><a href="#">PORTFOLIO <span></span><span></span></a></li>
  </ul>
</div>

Answer 1

将悬停效果放置在所有伪元素声明之后。

body{
    margin: 0;
    padding: 0;
    background: #ccc;
}

.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.center ul{
    margin: 0;
    padding: 0;
}

.center ul li{
    list-style: none;
    display: inline-block;
    padding: 10px;
    position: relative;
    margin: 5px;
    font-size: 20px;
    position: relative;
}

.center ul li a{
    text-decoration: none;
    color: white;
}

.center ul li a span:first-child::before{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 5px solid black;
    border-left: 5px solid black;
    top: 0px;
    left: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a span:first-child:after{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 5px solid black;
    border-right: 5px solid black;
    top: 0px;
    right: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a span:last-child::before{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-left: 5px solid black;
    border-bottom: 5px solid black;
    bottom: 0px;
    left: 0;
    opacity: 0.4;
    transition: .6s;
}


.center ul li a span:last-child::after{
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    bottom: 0px;
    right: 0;
    opacity: 0.4;
    transition: .6s;
}
ul li a:hover span:first-child::before{
    top: -10px;
    left: -10px;
    opacity: 1;
}

我已经在这里进行了测试：https://jsfiddle.net/9z7r3e8a/5/

Answer 2

您应该使用:first-child而不是:first-of-type，因为您已经将文本元素放在第一位（并且是第一个孩子）。 :first-of-type将在span的所有子元素中选择第一个<a>元素：

body {
    margin: 0;
    padding: 0;
    background: #ccc;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.center ul {
    margin: 0;
    padding: 0;
}

.center ul li {
    list-style: none;
    display: inline-block;
    padding: 10px;
    position: relative;
    margin: 5px;
    font-size: 20px;
    position: relative;
}

.center ul li a {
    text-decoration: none;
    color: white;
}

ul li a:hover span:first-of-type:before {
    top: -10px;
    left: -10px;
    opacity: 1;
}

.center ul li a span:first-of-type::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 5px solid black;
    border-left: 5px solid black;
    top: 0px;
    left: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a span:first-of-type::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 5px solid black;
    border-right: 5px solid black;
    top: 0px;
    right: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a span:last-of-type::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-left: 5px solid black;
    border-bottom: 5px solid black;
    bottom: 0px;
    left: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a span:last-of-type::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    bottom: 0px;
    right: 0;
    opacity: 0.4;
    transition: .6s;
}

.center ul li a:hover span:first-of-type:before {
    top: -10px;
    left: -10px;
    opacity: 1;
}

<div class="center">
  <ul>
    <li><a href="#">HOME <span></span><span></span></a></li>
    <li><a href="#">MENU <span></span><span></span></a></li>
    <li><a href="#">CONTACT <span></span><span></span></a></li>
    <li><a href="#">PORTFOLIO <span></span><span></span></a></li>
  </ul>
</div>

我无法选择后代跨度

2 个答案: