:not(:target) 选择器 CSS答案

【问题标题】：:not(:target) Selector Css:not(:target) 选择器 CSS
【发布时间】：2016-04-17 23:13:20
【问题描述】：

我正在制作一个基本的幻灯片演示，但我遇到了 :not(:target) 选择器的问题

我首先想要我的基础幻灯片。但是当我尝试这段代码时，我得到了一个空白页。

这里是我的代码和我的 css 文件。

提前致谢。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>order form</title>

<link href="slide.css" rel="stylesheet" type="text/css"> 


</head>

<section>
 <header class="slide" id="foo">
 <h1>Θέμα ενότητας</h1>
 </header>
 <article class="slide" id="main">
 <h1>Σκυλος :</h1>

<a href="#setter" class="button">next</a>
 </article>



 <article class="slide" id="setter">
 <h1>Setter</h1>
 <p> </p>
 <a href="#Beagle" class="button">next</a>


 <footer class="slide" id="thankyou">
 <h1>Ευχαριστώ!</h1>
 <p>Closing credits</p>
 </footer>
</section>

*csss

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}



:not(:target){
    display:none;
}

:first-of-type:not(:target) {display:block;}

【问题讨论】：

标签： css css-selectors slide target

【解决方案1】：

您会得到一个空白页，因为 :not(:target) 适用于所有元素。

您可能想要article:not(:target)（:first-of-type 规则也是如此）

请记住，如果您制定了一个覆盖规则来显示您的第一张幻灯片，它将始终保持活动状态。

要使用此技术，您必须将第一张幻灯片作为最后一张（在 DOM 中）。这样，您可以使用article:last-of-type 定位它以在开始时显示它，然后使用更具体的article:target ~ article:last-of-type 在另一个处于活动状态时隐藏它。

类似的东西

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

article,
article:target ~ article:last-of-type{
    display:none;
}

article:target,
article:last-of-type{display:block;}

<section>
  <header class="slide" id="foo">
    <h1>Θέμα ενότητας</h1>
  </header>
  
  <article class="slide" id="setter">
    <h1>Setter</h1>
    <p> </p>
    <a href="#Beagle" class="button">next</a>
  </article>

  <article class="slide" id="Beagle">
    <h1>Beagle</h1>
    <p> </p>
    <a href="#main" class="button">start</a>
  </article>

  <article class="slide" id="main">
    <h1>Σκυλος :</h1>
    <a href="#setter" class="button">next</a>
  </article>

  <footer class="slide" id="thankyou">
    <h1>Ευχαριστώ!</h1>
    <p>Closing credits</p>
  </footer>
</section>

【讨论】：

@user3135218 更新了一个工作示例（以及 DOM 中的一些必要更改）。 Καλή συνέχεια :)