：ありません（：ターゲット）セレクタのCss

私は基本的なスライドのデモを作っていますし、私は問題だ：ありません（：ターゲット）をセレクタ：ありません（：ターゲット）セレクタのCss

私が最初に私のベースのスライドを持っていると思います。しかし、私はこのコードをしようとすると、私は空白のページを持っています。

ここに私のコードと私の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>

*のCSS

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

出典

2016-04-17 user3135218

:not(:target)は、すべての要素に適用されるため、空白のページが表示されます。

おそらく

あなたが最初のスライドを表示するための最優先のルールを作れば、それは常にアクティブのままになることにかかわらず、覚えておいてください（同じ:first-of-typeルールのために行く）article:not(:target)をしたいです。

あなたが最後の1（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>

出典

2016-04-17 23:22:07

よう

何かええ、それは正常に動作するために、任意のアイデアを働いていましたか？ – user3135218

@ user3135218は、実際の例（*とDOM *のいくつかの必要な変更）で更新されました。 Καλήσυνέχεια:) –

：ありません（：ターゲット）セレクタのCss

答えて

関連する問題