1.CSS中的伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法:

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用

selector.class : pseudo-class {property: value}

如下面的一段代码:

a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

1.1锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

注意:

1.在 CSS 定义中,a:hover 必须被置于 a:linka:visited之后,才是有效的。

2.在 CSS 定义中,a:active 必须被置于a:hover 之后,才是有效的。

3.伪类名称对大小写不敏感。

1.2 CSS2 - :first-child 伪类

定义:

first-child 伪类来选择元素的第一个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p:first-child {font-weight: bold;}
        li:first-child {text-transform:uppercase;}
    </style>
</head>
<body>
    <div>
        <p>These are the necessary steps:</p>
        <ul>
            <li>Intert Key</li>
            <li>
                Turn key <strong>clockwise</strong>
            </li>
            <li>Push accelerator</li>
        </ul>
        <p>
            Do <em>not</em>
            push the brake at the same time as the accelerator.
        </p>
    </div>
</body>
</html>

效果如下图:

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。

必须声明<!DOCTYPE>,这样 :first-child 才能在 IE 中生效。

<style type="text/css">
p:first-child {
  color: red;
  }
</style>

选择器匹配作为任何元素的第一个子元素的 p 元素

<style type="text/css">
p > i:first-child {
  font-weight:bold;
  }
</style>

选择器匹配所有 <p>元素中的第一个<i>元素

<style type="text/css">
p:first-child i {
  color:blue;
  }
</style>

选择器匹配所有作为元素的第一个子元素的 <p>元素中的所有 <i>元素

1.3 CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

<style type="text/css">
        q:lang(no) {
                quotes: "~" "~"
        }
    </style>
    <body>
        <p>
            文字
            <q lang="no">段落中的引用的文字</q>
            文字
        </p>
</body>


2.CSS中的伪元素

CSS 伪元素用于将特殊的效果添加到某些选择器。

语法:

伪元素的语法:

选择器 : 伪元素 { 属性: 值 }

CSS 类也可以与伪元素配合使用:

选择器 . 类: 伪元素 { 属性: 值 }
p.article:first-letter {color: #FF0000}
<p class="article">文章中的一个段落。</p>

:first-line的使用方法:

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

first-line 伪元素仅能被用于块级元素。

下面的属性可以被应用到 first-line 伪元素:

font 属性

color 属性

background 属性

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

2.1多重伪元素

p {font-size: 12pt;}
p:first-letter {color: #FF0000; font-size: 24pt;}
p:first-line {color: #0000FF;}
<p>The first words of an article</p>

2.2 CSS2 - :before 伪元素

before(>=IE8) 伪元素可用于在某个元素之前插入某些内容。

h1:before
{
    content: url(beep.wav)
}

2.3 CSS2 - :after 伪元素

after(>=IE8) 伪类可用于在某个元素之后插入某些内容。

h1:after
{
    content: url(beep.wav)
}

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

a:after
  {
  content: " (" attr(href) ")";
  }

版权声明:本文为博主原创文章,未经博主允许不得转载。

【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏的更多相关文章

  1. 1.PHP站内搜索 分类: PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏

    PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...

  2. 全方位分析Objcetive-C Runtime 分类: ios技术 2015-03-11 22:29 77人阅读 评论(0) 收藏

    本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...

  3. UI基础:视图控制器.屏幕旋转.MVC 分类: iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏

    UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...

  4. UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类: iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏

    UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...

  5. 修改android应用包名 分类: android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏

    由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...

  6. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  7. CSS_Spirte实现原理 分类: HTML+CSS 2015-04-28 22:58 531人阅读 评论(0) 收藏

    CSS Spirte就是所谓的把很多的小图标合并成一张大的图片,然后使用CSS的background-position属性,来动态的定位自己需要图标的位置.这样做的目的主要是减少HTTP请求,加快网页 ...

  8. XHTML 结构化:使用 XHTML 重构网站 分类: C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  9. hdu 1039 (string process, fgets, scanf, neat utilization of switch clause) 分类: hdoj 2015-06-16 22:15 38人阅读 评论(0) 收藏

    (string process, fgets, scanf, neat utilization of switch clause) simple problem, simple code. #incl ...

随机推荐

  1. 移动App开发需要更多的PaaS平台而不是IaaS

    时代的变迁,创业的大潮,越来越多的人关注了有点开发,越来越多的人了解了互联网服务术语:PaaS.IaaS.SaaS.BaaS等.今天大家在开发App的时候这么多复杂的云服务如何来选择呢? IaaS服务 ...

  2. c++类的声明和对象的定义---10

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 类是创建对象的模板,一个类可以创建多个对象,每个对象都是类类型的一个变量:创建对象的过程也叫类的实例化. ...

  3. dictionary 和 hashtable 区别

    区别:1,Dictionary支持泛型,而Hashtable不支持. 2,Dictionary没有装填因子(Load Facto)概念,当容量不够时才扩容(扩容跟Hashtable一样,也是两倍于当前 ...

  4. CentOS 5: Make Command not Found

    在centos 5下安装软件遇到的问题,google了一圈,是因为系统没有安装编译器,那安装就是了,嘿嘿. 解决办法,在SSH下输入下面的命令 yum -y install gcc automake ...

  5. thinkphp学习笔记2—入口文件

    原文:thinkphp学习笔记2-入口文件 在thinkphp中有两个入口文件,一个是项目的入口文件,是index.php在主目录里面,还有一个是thinkphp框架的的入口文件,放在框架目录下面如: ...

  6. LevelDB初体验

    近期工作须要找一个能使用磁盘存储数据,对写要求比較苛刻,须要每秒达100000TPS,读的时候须要能10000TPS左右,不能占用太多内存.单节点满足这个要求的常见有Redis.Memcached等, ...

  7. MVC4相关Razor语法以及Form表单(转载)

    Razor的布局(Layout) 默认建的工程都自带的了一个_ViewStart.cshtml文件,文件里面的代码如下: @{ Layout = "~/Views/Shared/_Layou ...

  8. Linux 配置VNC远程桌面

    X11 提供的 display manager 为 xdm ,而著名的 KDE 与 GNOME 也都有自己的 display manager 管理程序,分别是 kdm 与 gdm .你可以透过三者中任 ...

  9. SpringBoot(七):集成DataSource 与 Druid监控配置

    绑定DataSource:Spring Boot默认的数据源是:org.apache.tomcat.jdbc.pool.DataSource,Druid是Java语言中最好的数据库连接池,并且能够提供 ...

  10. 微信小程序 初步认识一(微信运动步数)

    1.注册微信小程序 2.安装小程序开发工具 3.实例(显示微信运动步数) 4.后端处理(c#) 一 注册微信小程序 注册地址:https://mp.weixin.qq.com/cgi-bin/regi ...