:focus on CSS 如果点击两次就可以工作答案

【问题标题】：:focus on CSS works if it is clicked twice:focus on CSS 如果点击两次就可以工作
【发布时间】：2017-04-12 17:52:42
【问题描述】：

我一直在我发现的这个页面上进行试验。这是一个href的页面转换。但是，我想在聚焦时更改导航的颜色。并且 :focus on CSS 只会工作它被点击两次...... 这是我从某个地方得到的代码...

<html>
<head>
<style>

a.clicked:focus{
    color:red;
}
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 {
    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 );
}



</style>
</head>
<body>

<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>


</body>
</html>

【问题讨论】：

标签： html css focus

【解决方案1】：

最初我不明白这个问题，现在我相信我明白了，所以要执行类似的操作，您可以使用 html 将 radio 按钮绑定到标签，当它们是 toggled 时更改颜色文本。您可以在没有 javascript 的情况下执行此操作（但请继续阅读）。 html 在label (<label>) 内有一个anchor (<a>) 也是有效的，但在anchor 内有一个反向器(label) 是无效的。

至少在这种情况下，当我将anchor 包裹在label 中时，label 无法正确切换底层radio。因此，我在labels 上放置了一些内联onclick 事件，它可以正常工作。

更新

我意识到你不需要应用复选框或无线电黑客来让它工作，你可以通过添加以下 css 来做到这一点

/* 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);
}

查看下面的更新代码

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);
}

<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> 上的任何时候

:focus 指令是例如当文本框有光标时，它有焦点

我知道如何赋予链接焦点的唯一方法是使用 tab 键来选择它（不点击它）。

【讨论】：

但我希望它在页面“活动”时保持红色
非常感谢它解决了这个问题！顺便说一句，你能检查一下这个stackoverflow.com/questions/43423766/…（这是一个类似的问题，但不同的 html 结构）