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 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第58天:简单焦点轮播图

603
来自专栏编程坑太多

RN组件库-别考虑了关注收藏吧

2584
来自专栏前端杂货铺

不要给<a>设置outline:none

outline属性有什么作用     原文链接 a{outline:none} do not do it     当用户使用tab键进行链接切换时,该属性会在当...

4415
来自专栏娱乐心理测试

解决前端浏览器字体小于12px办法

做项目时,UI设计的字体10px,看效果图时发现字体仍然蛮大,改变12px时字体还是那么大,改变到14px时,字体变大了,发现规律,才知道原来浏览器为了让用户字...

1312
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

2843
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

2794
来自专栏web编程技术分享

【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)说明

本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误。因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一...

1602
来自专栏非著名程序员

Android官方支持百分比设置宽和高的控件及示例

Android官方支持百分比设置宽和高的控件及示例 非著名程序员 Android官方终于支持按百分比来设置控件的宽和高了。有了这样的控件,写起来就比较方便了。其...

1939
来自专栏夏时

两款 Js 插件为你的网站添彩

1231
来自专栏云端架构

【云端架构】前端 css print 用法

说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数问题,比如实现只打印网页的某部分内容,调整字体大...

4428

扫码关注云+社区