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. Ubuntu总结常用命令记录

    功能: 如何看系统是多少位:命令行下uname -a 桌面下打开终端:Ctrl + Alt + T    Linux下查看: 白色:表示普通文件蓝色:表示目录绿色:表示可执行文件红色:表示压缩文件浅蓝 ...

  2. 安装.NET FRAMEWORK 4.5安装进度条回滚之后发生严重错误 代码0x80070643

    安装.NET FRAMEWORK 4.5安装进度条回滚之后发生严重错误  代码0x80070643 注意: 回滚完成后,不要急着点击完成 查看日志:用IE浏览器打开,最后红色部分就是要查看的部分,本人 ...

  3. C语言 基础练习40题

    一.题目 1.输入2个整数,求两数的平方和并输出. 2. 输入一个圆半径(r)当r>=0时,计算并输出圆的面积和周长,否则,输出提示信息. 3.函数y=f(x)可表示为: 4.编写一个程序,从4 ...

  4. css3——新盒子定义box-sizing

    css3对盒子有了新定义,以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 wid ...

  5. linux arch目录下处理器体系架构介绍

    alpha 处理器Alpha 处理器最早由美国DEC 公司设计制造,在Compaq (康柏)公司收购DEC 之后,Alpha 处理器继续得到发展,并且应用于许多高档的Compaq 服务器上,HP (惠 ...

  6. 线程池大小 &amp; cpu core

    http://stackoverflow.com/questions/14556037/number-of-processor-core-vs-the-size-of-a-thread-pool ht ...

  7. ZOJ3795 Grouping(强连通分量+缩点+记忆化搜索)

    题目给一张有向图,要把点分组,问最少要几个组使得同组内的任意两点不连通. 首先考虑找出强连通分量缩点后形成DAG,强连通分量内的点肯定各自一组,两个强连通分量的拓扑序能确定的也得各自一组. 能在同一组 ...

  8. 安装Python mysqlclient出现“OSError: mysql_config not found”错误

    问题:               使用Python3开发一个管理平台,用MySQL数据库存放元数据.使用pip安装mysqlclient模块时出现“OSError: mysql_config not ...

  9. 了解java虚拟机—G1回收器(9)

    G1(Garbage-First)回收器是在JDK1.7中正式使用的全新垃圾回收器,G1拥有独特的垃圾回收策略,从分代上看,G1依然属于分代垃圾回收器,它会区分年代和老年代,依然有eden和survi ...

  10. Numpy 通用函数

    frompyfunc的调用格式为frompyfunc(func, nin, nout),其中func是计算单个元素的函数,nin是此函数的输入参数的个数,nout是此函数的返回值的个数 # 注:用fr ...