:focus on CSS 如果单击两次则有效

Question

我一直在我发现的这个页面上进行试验。这是一个 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>

Answer 1

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

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

更新

我发现您不需要应用复选框或无线电 hack 来让它工作，您可以通过添加以下内容来做到这一点 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 指令例如当文本框有光标时，它有焦点

我知道如何给予 link 焦点的唯一方法是使用 Tab 键 select 它（无需单击它）。

:focus on CSS 如果单击两次则有效

:focus on CSS works if it is clicked twice

html

css

focus