Css伪类选择器之常见形式、动态伪类篇

伪类选择器

伪选择器包括伪类和伪对象选择器，伪选择器以冒号（:）作为前缀标识符。冒号前可以添加选择器，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器：

单纯式，E:pseudo-class{property:value}

其中E为元素，E:pseudo-class为伪类名称，property是CSS的属性，value为CSS属性值。例如：a:link{color:red;}

混用式，E.class:pseudo-class{property:value}

其中.class表示类选择符。把类选择符与伪类选择符组成一个混合式的选择器，能够设计更复杂的样式，以精确匹配元素。例如：a.selected:hover{color:blue;}
CSS3的伪类选择器主要包括4种：动态伪类、结构伪类、否定伪类和状态伪类，下面分节进行详细讲解。
一、动态伪类
动态伪类是一类行为类样式，这些伪类并不存在于HTML中，只有当用户与页面进行交互时才能体现出来。动态伪类选择器包括两种形式：

锚点伪类，这是一种在链接中常见的样式，如:link、:visited
行为伪类，也称为用户操作伪类，如:hover、:active和:focus

   在/* 链接没有被访问时前景色为灰色 */.demo a:link{color: gray;} /* 链接被访问后前景色为黄色 */.demo a:visited{color: yellow;}/* 鼠标悬浮在链接上时前景色为绿色 */.demo a:hover{color: green;}/* 鼠标击中激活链接那一下前景色为蓝色 */.demo a:active{color: blue;}

对于这4个锚点伪类的设置，有一点需要特别注意，那就是它们的先后顺序，要让它们遵守一个顺序原则，也就是link ~ visited ~ hover ~ active 。如果把顺序搞错了，会带来意想不到的错误，如果是初学者，可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，它们所表达的意思如下：

:hover：用于用户把鼠标移动到元素上面时的样式效果
:active：用于用户单击元素时的样式效果，即按下鼠标左键时发生的样式，当松开鼠标左键该动作也就完成了
:focus：用于元素成为焦点时的样式效果，这个经常用在表单元素上

Css伪类选择器之常见形式、动态伪类篇相关推荐

python创建类的实例方法-Python中动态创建类实例的方法
简介在Java中我们可以通过反射来根据类名创建类实例,那么在Python我们怎么实现类似功能呢? 其实在Python有一个builtin函数import,我们可以使用这个函数来在运行时动态加载一些模 ...
〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
伪类选择器之hover
1.表示鼠标移入时候发生的状态改变(选择器:hover{}) 2.使用: (1)改变自己------当前自己的选择器:hover{} (2)通过父级改变子级------父级选择器:hover 子级选择 ...
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...
一般没有系统的学习过,只是在网上看一些片断教程的人.见到最多的可能也就是: 元素选择符(例如:body .a .li ) ID选择符(例如:#head.#body.#foot) 类选择符(例如:.re ...
css通配选择符用什么表示,css的选择符
元素选择符 Element Selectors* E E#id E.class 关系选择符 Relationship SelectorsE F E>F E+F E~F属性选择符 Attribut ...
java 动态创建实例_java – 有没有办法动态创建类(而不是实例)？
我有一个关于如何动态创建类(而不是实例)的问题. 在我的项目中,我需要根据配置文件编写几个类似的类. 例如,有一个像这样的 JSON: { { "lang": "pyth ...
【转】浅析动态代理类实现过程
代理模式代理模式的作用是:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 代理模式一般涉及到 ...
Java字节码介绍及动态修改类
前言对于Java字节码,它是在Java类的编译过程产生的,即由.java源文件到.class二进制字节码文件的过程.而Java类的加载又是通过类的名字获取二进制字节流,然后在内存中将字节流生成类对象 ...
css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...

Css伪类选择器之常见形式、动态伪类篇

伪类选择器

Css伪类选择器之常见形式、动态伪类篇相关推荐

最新文章

热门文章