Question

我正在制作一个基本的幻灯片演示，我遇到了一个问题：not（：target）selector

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

这是我的代码和我的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)（{em> :first-of-type规则）

请注意，如果您制定了覆盖规则来显示第一张幻灯片，它将始终保持有效状态。

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

像这样的东西

＆＃13;

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

＆＃13;

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

＆＃13;

：not（：target）Selector Css

1 个答案: