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

2022-05-17 14:55:59

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 }