目录
前言
伪类
设置当前目标元素样式
设置元素获得焦点时的样式
JS获取当前得到焦点的元素
设置子元素获得焦点时,该元素的样式
其他
首页 web前端 css教程 深入了解CSS伪类选择器的用法(代码示例)

深入了解CSS伪类选择器的用法(代码示例)

Sep 19, 2018 pm 03:57 PM
伪类选择器

本篇文章给大家带来的内容是关于深入了解伪类选择器的用法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

前言

 过去零零星星地了解和使用: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,用于定位页面内某项资源。假设现在页面存在

Target

的元素,那么只要地址栏输入#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。
它们分别是:

鼠标点击;

Tab键;

通过JavaScript的HTMLElement.prototype.focus()方法。

那么传统上支持focus状态的元素必定是a、button、input、select和textareas.
而HTML5中增加当元素设置了contenteditable或tabindex属性时,该元素支持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]
登录后复制

其他

:root,用于设置元素的样式,从IE9开始支持。

:checked,用于设置单选和复选控件被选中的样式,从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。

:empty,用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素,而p{}则为没有子节点的元素。

:not,作为谓语表达取反的语义。

:placeholder-shown,用于设置元素placeholder显示时的样式。

以上是深入了解CSS伪类选择器的用法(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

css中hover什么意思 css中hover什么意思 Feb 22, 2024 pm 01:24 PM

CSS中的:hover是一种伪类选择器,用于在用户悬停在特定元素上时,应用特定的样式。当鼠标悬停在元素上时,可以通过:hover为其添加不同的样式,从而增强用户体验和交互效果。本文将详细讨论:hover的含义以及给出具体的代码示例。首先,让我们了解一下CSS中:hover的基本用法。在CSS中,可以通过选择器来选中要应用:hover效果的元素,并在其后面加上

css中的li标签怎么去除前面的圆点 css中的li标签怎么去除前面的圆点 Apr 28, 2024 pm 12:36 PM

CSS中去除li标签圆点的方法有两种:1.使用"list-style-type: none;"样式;2.使用透明图片和"list-style-image: url("transparent.png");"样式。两种方法都能删除所有li标签的圆点,如果您只想删除某些li标签的圆点,可以使用伪类选择器。

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式 如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式 Nov 20, 2023 am 11:52 AM

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素,而:nth-child(-n)可以匹配

使用CSS中的content属性 使用CSS中的content属性 Feb 19, 2024 am 10:56 AM

CSS中content属性的用法CSS中的content属性是一个非常有用的属性,它是用来在伪类中插入额外的内容的。content属性一般只能在伪类选择器(如::before和::after)中使用,它可以用来插入文本或者图片等内容。我们可以通过content属性实现一些非常炫酷的效果。下面是content属性的一些用法以及具体的代码示例:插入文本内容通过

css中::什么意思 css中::什么意思 Apr 28, 2024 pm 03:45 PM

CSS 中的 :: 伪类选择器用于指定元素的特殊状态或行为,并且比伪类选择器 : 更具体,可针对元素的特定属性或状态进行选择。

css中hover怎么使用 css中hover怎么使用 Feb 23, 2024 pm 12:06 PM

CSS中的hover伪类是一个非常常用的选择器,它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法,并提供具体的代码示例。一、基本用法要使用hover,我们需要先为该元素定义一个样式,然后使用:hover伪类来制定鼠标悬停时对应的样式。例如,我们有一个button元素,当鼠标悬停在按钮上时,我们希望按钮的背景色变为红色,文字颜色变为白

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式 使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式 Nov 20, 2023 am 11:22 AM

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式,需要具体代码示例在CSS中,伪类选择器是一种非常强大的工具,可以用来选择文档树中特定的元素。其中之一就是:nth-last-child(2)伪类选择器,它可以选择倒数第二个子元素并对其应用样式。首先,让我们来创建一个示例HTML文档,以便我们可以在其中使用这个伪类选择器。以

不同种类的CSS3选择器 不同种类的CSS3选择器 Feb 18, 2024 pm 11:02 PM

CSS3选择器有多种类型,它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型,并提供具体的代码示例。基本选择器:元素选择器:使用元素名称作为选择器,此处以p元素为例:p{color:red;}类选择器:使用类名作为选择器,以.开头,此处以class为example的元素为例:.example{fo

See all articles