网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于深入了解伪类选择器的用法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
前言
?过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。
伪类
?伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement
的4大经典伪类
:link,用于设置链接初始状态时的样式;
:visited,用于设置链接被点击过后的样式;
:hover,用于设置鼠标悬停在链接上方时,链接的样式;
:active,用于设置鼠标按键按下,但未释放时,链接的样式。
想必各位都和我一样,最初接触到的就是上述4个伪类了吧?!而且还死机硬背它们的设置顺序(LVAH
)吧,哈哈。
设置当前目标元素样式
?还记得URL中的井号吗?从井号(#)开始到URL的末尾称为URL的hash或fragment,用于定位页面内某项资源。假设现在页面存在<h3 id="title">Target</h3>的元素,那么只要地址栏输入#title浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h3#title位于可视区的特定位置。(注意:请不要和UI Routing混为一谈)
?而上述这个被定位的页面资源,被称为目标元素或当前活动元素!可通过:target设置其样式。
?兼容性:IE9开始支持。
示例:
// 当前URL为http://foo.com#1
:target {
color: red;
}
.title{
color: blue;
&:target{
border: solid 1px red;
}
}
.title{I'm not target element.}
.title#1{Yes, I'm.}
那么传统上支持focus状态的元素必定是a、button、input、select和textareas.
而HTML5中增加当元素设置了contenteditable或tabindex属性时,该元素支持focus状态。
也就是符合以下选择器的元素均支持focus状态。