关于伪类:target

时间 2019-11-10

标签关于 target 繁體版

原文原文链接

什么是target伪类？先看一下解释：css

　　URL后面跟锚点#，指向文档内某个具体的元素。这个被连接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。html

举个例子：优化

<html>
    <a href="#target">点我</a>
    <div id="target"><div>
</html>

正常状况下，a标签里会跟一个url，可是在这里咱们添加的不是url，而是一个锚点，当咱们点击a时，本页面的url后面会添加上"#target"，而且，id为target的div块就处于了当前活动状态url

那么，这究竟有什么用呢？spa

其实这用处可多了，能够利用这种特性，不使用js就能实现一些交互效果code

仍是上面的代码，为其添加csshtm

#target:not(:target) {
    display : none;  
}

#target:target {
    display : block;
    width : 100px;
    height : 100px;
    border : 1px solid red;      
}

若是咱们不点击a元素，div元素就不显示，若是咱们点击了a元素，div就显示成一个100*100，而且拥有红色边框的块；blog

若是了解了这种简单的用法，咱们就能够用它实现一些稍微复杂一点的东西，好比能够实现一个自由切换的tab栏，或者一个能够进入和退出的导航栏element

合理利用target伪类能够减小js的使用，不只能够实现页面的优化，也能够让代码结构更加清晰文档

1. CSS3伪类:target
2. html5 target伪类
3. css3之:target伪类
4. CSS3 target伪类和not伪类.html
5. CSS3 target伪类简介
6. css3 target伪类学习
7. :target的伪类的用法
8. CSS3-target伪类选择器
9. :target 伪类使用技巧
10. CSS3---结构性伪类选择器—target
更多相关文章...
• ASP.NET AdRotator Target 属性 - ASP.NET 教程
• ASP.NET HyperLink Target 属性 - ASP.NET 教程
• NewSQL-TiDB相关
• Kotlin学习（二）基本类型