:not(:target) 选择器 Css

Question

我正在制作一个基本的幻灯片演示，我遇到了 :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;}

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

:not(:target) 选择器 Css

:not(:target) Selector Css

css

css-selectors

target

slide