：没有（：目标）选择的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

回答

相关问题