: nicht (: target) Wahl Css

Ich bin eine grundlegende Dia-Demo zu machen, und ich habe ein Problem mit: nicht (: Ziel) Selektor: nicht (: target) Wahl Css

ich möchte zunächst meine Basisschlitten haben. aber wenn ich diesen Code versuche, habe ich eine leere Seite bekommen.

hier mein Code und meine CSS-Datei.

danke im voraus.

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

Quelle

2016-04-17 user3135218

Sie eine leere Seite bekommen, weil die :not(:target) auf alle Elemente gilt.

Sie wollen wahrscheinlich article:not(:target) aber, dass

Beachten (das gleiche für die :first-of-type Regel geht), wenn Sie eine übergeordnete Regel machen Sie Ihre erste Folie angezeigt werden, es bleibt immer aktiv.

diese Technik nutzen zu können, Ihre erste Folie als das letzte Platz (im DOM) müssen. Auf diese Weise können Sie es mit article:last-of-type tarnen, um es beim Start anzuzeigen und dann verwenden Sie die genauere article:target ~ article:last-of-type, um es zu verbergen, wenn ein anderes aktiv ist.

So etwas

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>

Quelle

2016-04-17 23:22:07

ja es ist eine Idee, um richtig zu arbeiten? – user3135218

@ user3135218 aktualisiert mit einem Arbeitsbeispiel (* und einige erforderliche Änderungen im DOM *). Καλή συνέχεια :) –

Antwort

Verwandte Themen