Question

我一直在试验这个我找到的页面。它是href的页面转换。但是，我想在聚焦时改变导航的颜色。并且：专注于CSS只会被点击两次... 这是我从某处获得的代码......

body{
  background-color:black;
}

Answer 1

最初我没有理解这个问题，现在我相信我这样做了，所以做这样的事情你可以使用html将radio按钮绑定到标签上，当它们重新{{{ 1}}更改文本的颜色。你可以不用javascript（但请继续阅读）。在toggled（html）内部anchor（<a>）也有效label，但内部不是<label> label）。

至少在这种情况下，当我将anchor包裹在anchor内时，label无法正确切换基础label。因此我在radio上添加了一些内联onclick事件，并且它可以正常运行。

<强>更新

我已经意识到您不需要应用复选框或无线电黑客来实现此功能，您可以通过添加以下css来实现

labels

请参阅下面的更新snipplet

＆＃13;

/* link color management */

header [href="#servicios"],
a[id="galeria"]:target~header [href="#galeria"],
a[id="contacto"]:target~header [href="#contacto"] {
  color: rgb(255, 0, 0);
}

a[id="galeria"]:target~header [href="#servicios"],
a[id="contacto"]:target~header [href="#servicios"] {
  color: rgb(255, 255, 255);
}

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  overflow: hidden;
}

header {
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.5rem;
  z-index: 10;
}

nav {
  width: 100%;
  padding-top: 0.5rem;
}

nav ul {
  list-style: none;
  width: inherit;
  margin: 0;
}

ul li:nth-child( 3n + 1),
#main .panel:nth-child( 3n + 1) {
  background: rgb( 0, 180, 255);
}

ul li:nth-child( 3n + 2),
#main .panel:nth-child( 3n + 2) {
  background: rgb( 255, 65, 180);
}

ul li:nth-child( 3n + 3),
#main .panel:nth-child( 3n + 3) {
  background: rgb( 0, 255, 180);
}

ul li {
  display: inline-block;
  margin: 0 0px;
  margin: 0 0rem;
  padding: 0px 0px;
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
  line-height: 1.5;
}

ul li a,
.magic-label {
  color: #fff;
  text-decoration: none;
}

.panel {
  width: 100%;
  height: 700px;
  z-index: 0;
  -webkit-transform: translateZ( 0);
  transform: translateZ( 0);
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.panel h1 {
  font-family: sans-serif;
  font-size: 64px;
  font-size: 4rem;
  color: #fff;
  position: relative;
  line-height: 200px;
  top: 20%;
  text-align: center;
  margin: 0;
}


/*
 *Scrolling
 */

a[ id="servicios"]:target~#main article.panel {
  -webkit-transform: translateY( 0px);
  transform: translateY( 0px);
}

a[ id="galeria"]:target~#main article.panel {
  -webkit-transform: translateY( -500px);
  transform: translateY( -700px);
}

a[ id="contacto"]:target~#main article.panel {
  -webkit-transform: translateY( -1000px);
  transform: translateY( -1400px);
}


/* link color management */

header [href="#servicios"],
a[id="galeria"]:target~header [href="#galeria"],
a[id="contacto"]:target~header [href="#contacto"] {
  color: rgb(255, 0, 0);
}

a[id="galeria"]:target~header [href="#servicios"],
a[id="contacto"]:target~header [href="#servicios"] {
  color: rgb(255, 255, 255);
}

＆＃13;

原始答案 我没有理解这个问题

你很可能想要使用<a id="servicios"></a> <a id="galeria"></a> <a id="contacto"></a> <header class="nav"> <nav> <ul> <li> <a class="clicked" href="#servicios"> Servicios </a> </li> <li> <a class="clicked" href="#galeria"> Galeria </a> </li> <li> <a class="clicked" href="#contacto"> Contacta nos </a> </li> </ul> </nav> </header> <section id="main"> <article class="panel" id="servicios"> <h1> Nuestros Servicios</h1> </article> <article class="panel" id="galeria"> <h1> Mustra de nuestro trabajos</h1> </article> <article class="panel" id="contacto"> <h1> Pongamonos en contacto</h1> </article> </section>指令，这将是光标在锚:hover上的任何时候

<a>指令是例如当文本框中有光标时，它具有焦点

我知道如何提供链接焦点的唯一方法是使用Tab键选择它（不用点击它）。

：如果点击两次，专注于CSS

1 个答案: