：沒有（：目標）選擇的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>

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

來源

2016-04-17 user3135218

你得到了一個空白頁面，因爲: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>

來源

2016-04-17 23:22:07

是的，它的工作任何想法才能正常工作？ – user3135218

@ user3135218更新了一個工作示例（*和DOM *中的一些必需更改）。 Καλήσυνέχεια:) –

：沒有（：目標）選擇的CSS

回答

相關問題