关闭

CSS3 target 选择器_:target伪类的使用

时间: 2018-04-02阅读: 2797标签: 选择器

target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本。target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中的标志通常会包含一个#,后面带有一个标志符名称,如#box_one,:target就是匹配ID为"box_one"的目标元素。


举个简单的例子:

如一个页面中有一个a标签,它的href如下:<a href="#box-three">Tab 3</a> ,同一个页面中也会有以box-three为id的元素,<div id="box-three">tab3 content</div>

那么a标签的href属性会链接到#box-three元素,也就是box-three:target选择符所选的目标元素,它所指定的样式就是当a链接到这个元素时候,目标元素的样式。


注意:

目标伪类选择器是一个动态选择器,只有存在url指向该匹配元素时候,样式才会生效。

<style>
:target {
	border: 2px solid #D4D4D4;background-color: #e5eecc;
}
</style>
<p>
	<a href="#news1">跳转至内容 1</a>
</p>
<p>
	<a href="#news2">跳转至内容 2</a>
</p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 html 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

效果如下:



总结

target 选择器会突出显示当前活动的 html 锚。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/581

关闭

CSS选择器_伪元素选择器之处理父元素高度及外边距溢出

最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

CSS 选择器nth-child的几种用法

在开发过程中,会碰到一些选择器的需求:例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

CSS选择器与CSS的继承,层叠和特殊性

.类选器名称{css样式代码;}这样的类选择器在css样式编码中是最常用到的,注意:1.英文圆点开头2.其中类选器名称可以任意起名(但不要起中文);除此之外,还有ID选择器,不过在很多方面,ID选择器都类似于类选择符

了解CSS基本用法和选择器知识

相信做过网页的对Css都不是很陌生,它可以帮助我们重铸网页中很多绚丽的特效,尤其是现在Css已经发展3.0版本,很多功能更是丰富多彩,让我们的开发时间不仅大大缩短,而且还可以轻松做出许多华丽的特效,需要注意的是

vue 选择器_实现scoped深度作用选择器

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件

css选择器中:first-child与:first-of-type

css选择器中:first-child与:first-of-type是比较容易混淆的概念,这里用案例介绍它们具体的区别。:first-child 选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!