CSS3：命名标记上的目标不起作用

Question

我很难让:target处理名为tag的工作。

小提琴在这里：https://jsfiddle.net/vgcLartp/1

为什么这不起作用？

Answer 1

您需要在要显示的部分上使用目标而不是链接

section:target {...}

See updated jsfiddle

nav {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}

.nav-item {
  display: block;
  float: left;
  margin-right: 20px;
  height: 60px;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  outline: none;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active,
.nav-item.active:hover {
  color: #333;
  border-bottom-color: #b39095;
}

section:target {
  visibility: visible;
  opacity: 1;
}


/* -------------------------------- SECTIONS -------------------------------- */

#sections {
  float: left;
  width: 1200px;
  height: 400px;
}

section {
  position: fixed;
  width: 630px;
  height: 400px;
  float: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s linear;
}

section p {
  padding-top: 5px;
  line-height: 1.6em;
}

section a {
  color: #b39095;
  text-decoration: none;
}

section a:hover {
  color: #7b618a;
}


/* --------------------------------- OPTIONS -------------------------------- */

fieldset {
  margin: 26px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}

input {
  padding-left: 2px;
}

#oxford-app-id {
  width: 80px;
}

#oxford-app-key {
  width: 290px;
}

label {
  padding-left: 5px;
}

<div id="container">
  <header>
    <nav>
      <a id="options" class="nav-item active" href="#section-options">options<br>saved</a>
      <a id="about" class="nav-item" href="#section-about">about</a>
    </nav>
  </header>

  <div id="sections">
    <section id="section-options">
      <p>
        Options
      </p>
    </section>
    <section id="section-about">
      <p>
        About
      </p>
    </section>
  </div>

</div>

Answer 2

试试这个

decltype([](){})

Answer 3

来自w3school：

  

带有＃后跟锚名称的URL链接到文档中的某个元素。链接到的元素是目标元素。   ：target选择器可用于设置当前活动目标元素的样式。

:target选择器在HTML中指定（例如使用锚点）元素时非常有用。

在您的情况下，您可以使用：

:target {
    visibility: visible;
    opacity: 1;
}