CSS魔法堂:稍稍深入伪类选择器

前言

 过去零零星星地了解和使用:link::aftercontent等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理。

伪类

 伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果。具体有:link:visited:hover:active:focus:focus-within:target:root:checked

HTMLAnchorElement的4大经典伪类

  1. :link,用于设置链接初始状态时的样式;
  2. :visited,用于设置链接被点击过后的样式;
  3. :hover,用于设置鼠标悬停在链接上方时,链接的样式;
  4. :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用于设置元素处于focus状态下的样式。 兼容性:IE8开始支持。 那么哪些元素支持focus状态呢?那要先弄清楚通过哪些操作可能实现focus。 它们分别是:

  1. 鼠标点击;
  2. Tab键;
  3. 通过JavaScript的HTMLElement.prototype.focus()方法。

那么传统上支持focus状态的元素必定是abuttoninputselecttextareas. 而HTML5中增加当元素设置了contenteditabletabindex属性时,该元素支持focus状态。 也就是符合以下选择器的元素均支持focus状态。

a,button,input,select,textarea,[contenteditable],[tabindex]

注意:若tabindex属性值小于0,则无法通过Tab键获得焦点。但可以通过鼠标点击 或 脚本时元素获得焦点。

JS获取当前得到焦点的元素

/* 
 * 加载完成时默认返回body
 * 若某元素获得焦点时,则返回该元素
 */
document.activeElement :: HTMLElement

另外还有一个让人误会的属性

// 用于检测文档是否得到焦点,即用户是否正在与页面交互
// 页面仅仅位于屏幕可视区域,而用户没有与之交互时返回false。
document.hasFocus :: Void -> Boolean

设置子元素获得焦点时,该元素的样式

:focus-within,用于设置当子元素处于focus状态时,该元素的样式。 兼容性:Chrome63开始支持。

示例:二次确认密码时,密码框高亮

.form-control{
  &:focus-within > input{
    &:focus {
      border: solid 1px skyblue;
    }
    
    &:not(:focus){
      border: solid 1px orange;
    }
  }
}

.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]

其他

  1. :root,用于设置<html>元素的样式,从IE9开始支持。
  2. :checked,用于设置单选和复选控件被选中的样式,从IE9开始支持。结合伪元素::beforecontent属性可以实现灵活高效的自定义单选和复选控件。
  3. :empty,用于设置没有子节点的元素的样式。div{ }为存在TEXT_NODE子节点的元素,而div{}则为没有子节点的元素。
  4. :not,作为谓语表达取反的语义。
  5. :placeholder-shown,用于设置元素placeholder显示时的样式。

总结

尊重原创,转载请注明来自:https://www.cnblogs.com/fsjohnhuang/p/9551799.html ^_^肥仔John

参考

https://css-tricks.com/almanac/selectors/f/focus/ https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(六)动画animation,Web字体

好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。

10710
来自专栏GIS讲堂

C#控件命名规范

1、 本规范是个人平时使用时为方便个人使用而制定的一套规范,有很多地方不易记忆与理解,后续在具体的使用过程中会做一定的改动。

26230
来自专栏python3

body标签中相关标签

字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

18810
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

33840
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

25220
来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

75150
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

25960
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(三)表单

table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->

42630
来自专栏数据小魔方

动态图表13|单选按钮

今天要跟大家分享的是动态图表13——单选按钮! 本例要讲的单元按钮与复选框的作用类似,只是选择的规则不一样。复选框可以同时选中一个以上,而单元格框则只能一次选中...

35740
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

high:被界定为高的值的范围。 low:被界定为低的值的范围。 max:规定范围的最大值。 min:规定范围的最小值。 optimum: 规定度量的最...

16830

扫码关注云+社区

领取腾讯云代金券