按钮背景色不起作用

Question

我想使用我创建的波纹按钮，但是当我执行<a href>标记时，按钮的背景颜色会改变。 我碰巧相信它在CSS中，但是我不确定。 我关闭了文字修饰，因此下划线不会显示，仅此而已。

 var addRippleEffect = function(e) { var target = e.target; if (target.tagName.toLowerCase() !== 'button') return false; var rect = target.getBoundingClientRect(); var ripple = target.querySelector('.ripple'); if (!ripple) { ripple = document.createElement('span'); ripple.className = 'ripple'; ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; target.appendChild(ripple); } ripple.classList.remove('show'); var top = e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop; var left = e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft; ripple.style.top = top + 'px'; ripple.style.left = left + 'px'; ripple.classList.add('show'); return false; } document.addEventListener('click', addRippleEffect, false); 

 body { margin: 0; padding: 0; } #wrap { position: absolute; width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; } h1 { display: flex; margin: 0; padding: 0; align-items: center; flex: 2; font-family: 'Open Sans'; } #main { flex: 5; } button { position: relative; display: block; width: 13em; height: 3em; margin: 2em; border: none; outline: none; letter-spacing: .2em; font-weight: bold; background: #dfdfdf; cursor: pointer; overflow: hidden; user-select: none; border-radius: 2px; font-family: 'Open Sans'; } button:nth-child(2) { color: #fff; background: #4285f4; transition: all 0.3s ease-in-out; } button:nth-child(2):hover { background: #6ea2f7; } button:nth-child(3) { color: #fff; background: #00bad2; } button:nth-child(4) { color: #fff; background: #ff8a80; } .ripple { position: absolute; background: rgba(0, 0, 0, .15); border-radius: 100%; transform: scale(0); pointer-events: none; } .ripple.show { animation: ripple .75s ease-out; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } a { text-decoration: none; } 

 <link href='https://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'> <div id="wrap"> <h1>Ripple Effect</h1> <div id="main"> <button>BUTTON</button> <a href="http://www.google.com"> <button>BUTTON</button> </a> <button>BUTTON</button> <button>BUTTON</button> </div> </div> 

Answer 1

它不起作用的原因是button:nth-child(2)将匹配作为其父级的第二个子元素的button元素。

在您的情况下，您的按钮不是其父级的第二个子级，因为其父级是<a> 。

做这个：

<button>
  <a href="http://google.com">BUTTON</a>
</button>

看看现在如何运作？

有关nth-child更多信息，请访问第n个子项MDN页面 。