• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 深入理解CSS中的UI伪类

深入理解CSS中的UI伪类

作者:dopppler 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,UI伪类等相关知识,dopppler 希望在学习及工作中可以帮助到您

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是 selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类。

伪类可以分为两种:

    UI( User Interface,用户界面)伪类会在 HTML 元素处于某个状态时(比如鼠标
    指针位于链接上),为该元素应用 CSS 样式。

    结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第
    一个或最后一个),为相应元素应用 CSS 样式。

UI伪类
链接伪类

针对链接的伪类一共有4个,因为链接始终会处于如下4种状态之一。

    Link
    Visited
    Hover
    Active

    提示:由于这4个伪类的特指度相同,如果不按照这里列出的顺序使用它们,浏览器可能不会显示预期效果。方便记忆:LoVe? HA! 大写字母就是每个伪类的头一个字母。

    提示:一个冒号( : )表示伪类,两个冒号( :: )表示 CSS3 新增的伪元素。

focus伪类

表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。
例如:input:focus {border:1px solid blue;}
上面一行代码会在光标位于 input 字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
target伪类

如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标( target),可以
用:target 伪类选中它。
例如:对于这个链接:<a href="#more_info">More Information</a>
位于页面的其它地方、ID 为 more_info 的那个元素就是目标。
假设该元素为这样:<h2 id="more_info">This is the information you are looking for.</h2>
那么,CSS规则:#more_info:target {background:#eee}
会在用户单击链接转向 ID 为 more_info 的元素时,为该元素添加灰色背景。

    维基百科在其引证中大量使用了:target 伪类。维基百科的引证链接就是正文里那些
    不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target 应用的
    突出显示,很难知道你点击的链接对应着一大堆引证中的哪一个。

结构化伪类

结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么。
first-child和:last-child

格式:

  1. e:first-child   
  2. e:last-child  

示例:

  1. ol.results li:first-child {color:blue;}   
  2. nth-child  

格式:

  1. e:nth-child(n)  

示例:

  1. li:nth-child(3)  

说明:e 表示元素名,n 表示一个数值(也可以使用 odd 或 even)

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS3中使用RGBa来调节透明度的教程
  • 2017-08-06CSS行高line-height的个人理解
  • 2017-08-06动态的样式语言less语法详解之混合属性
  • 2017-08-06CSS3 Media Queries详细介绍和使用实例
  • 2017-08-06IE系列的Css if hack条件语法
  • 2017-09-27css上传文件样式修改
  • 2017-08-06什么是CSS Sprites(图片合并)技术 图文介绍
  • 2017-08-06css实现适用于团购网站的橙色导航菜单代码
  • 2017-08-06表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)
  • 2017-08-06css图标与文字对齐的两种实现方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS padding属性定义边内补白
    • css空白边叠加的几种情况介绍
    • CSS定位的几个类型简单介绍
    • IE6不支持position:fixed bug的完美解决
    • 基于css3仿造window7的开始菜单
    • 减少图片HTTP请求的方法分析
    • 关于select标签的高度设置在ie6/ie7下兼容心得
    • IE6下css设置容器高度的BUG不能小于某个值
    • 字符串过长CSS截取多余文字并用省略号显示
    • CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有