css伪类的说明以及使用(css事件)

CSS伪类的使用(css事件)

转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html

  之前有开发开发App的时候,有同事问我那个列表的条目按下去背景会变成淡黄色的效果是怎么做的,然后我若无其事的说了句:用CSS事件啊。。。╮( ̄▽ ̄)╭,然后同事不解的回到座位后在代码中狂找...?,嗯~最终效果实现与否就不得而知啦~;最近稍仔细的翻翻相关文章才知道类似于JavaScript中的事件的东西叫做“伪类”,是CSS中特有的一种东西ヽ(^o^)丿,大多时候很少很少用到,这个叫做“伪类”的东东一般只有html的标签用到,很简单,。。。但,因为简单,所以要实现稍微复杂的功能还是依靠JavaScript哈~,嗯哼,先放张图把,到底什么是“伪类”,看过之后瞬间秒懂~ (。♥‿♥。)

  看完,我来先小小地总结下,CSS伪类在每一代CSS标准中都会扩充一些,由于暂时用得最多的大致有以下五个(只是对于我来说哈~( ̄。。 ̄)):

伪类

伪类描述

:active

点按,向被激活的元素添加样式。

:focus

焦点输入,向拥有键盘输入焦点的元素添加样式。

:hover

当鼠标悬浮在元素上方时,向元素添加样式。

:link

链接未访问,向未被访问的链接添加样式。

:visited

链接已访问,向已被访问的链接添加样式。

  要使用这些伪类的话,样式该怎么写呢,。。。以下举个?例子,比如说:focus -->

 1 这是一个输入框:<input class="input" type="text" value="999" nameo="textInput"/>
 2 
 3 这是对输入框定义的默认CSS:
 4 .body .input{
 5     width:100px;
 6     height:40px;
 7     border-radius: 13px;
 8 }
 9 
10 这是对输入框“获取焦点”后应用的CSS:
11 .body .input:focus{
12     background-color:mediumpurple;
13 }

真实的效果:

  (默认样式)

  (获取焦点后的样式)

  看完是不是超级简单,有木有~;这几需要说明几点:

A>以上可以只对输入框定义一个获取焦点后的(:focus)样式,就可以看出效果啦,遂,在开发的时候如果不是特别复杂的样式效果,切勿轻易动用JavaScript来控制dom的样式  

B>大多浏览器对于直接调试带有伪类的样式较为麻烦,比如Chrome的不同版本可以不会显示dom的伪类样式,建议大家先写成普通样式调试成功后再改回dom的伪类样式,这样较为nice

C>dom(标签)的所有样式只能定义在样式文件或单独的<style></style>区域中,不可定义在dom中

  这些懂了吧~。。。<( ̄︶ ̄)>;以上只是定义了所列举的部分伪类的样式效果,下面把剩余的几种伪类效果也展示下,方便读者参考?。

  ==>  :active

    (点按之前)

    (点按之后)

  ==》  :hover

      (鼠标位于dom之上前)

      (鼠标未于dom之上后)

  ==》  :link

      (链接未访问)

  ==》  :visited

      (链接未访问前)

      (链接已访问)

  OK?,既已明白,我也该睡觉觉~\(≧▽≦)/~啦啦啦,现在是:2017-11-13 22:10:15

梦游中:啊~哈~~,明天又是工作日,真美好的一天? ( 明天迟到,看我怎么收拾你? )

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

Ios常用第三方动画框架(三)

593
来自专栏Android机动车

一个小彩蛋

今天要介绍的就是大神的 Scalpel,可以实现在手机上 3D 展示届满布局,而且用起来超级简单!

1093
来自专栏互联网杂技

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

3626
来自专栏编程微刊

当鼠标聚焦时输入框变色(focus事件实例)

1902
来自专栏何俊林

视频画中画效果,拖动进度条可以seek到相应视频帧显示

在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面。

531
来自专栏前端说吧

JQ-动画合集(ing...)

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

html学习笔记(一)

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

1185
来自专栏青蛙要fly的专栏

Android技能树 — Drawable小结

我们知道平常使用最多的Drawable可能是图片了,我们知道一个图片的原本的尺寸,比如下面这个图:

441
来自专栏听雨堂

自适应页面高度

      困扰了我很久的问题:我很想让一个框架左侧的菜单(控件或者是折叠的LI或者别的),能够自动适应浏览器的变化。因为即使是同一分辨率,页面中的实际高度也不...

1997
来自专栏进击的君君的前端之路

jQuery实现轮播

1072

扫码关注云+社区