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:link 和 a: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伪类和伪元素的更多相关文章

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

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

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

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

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏

    引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"&g ...

  5. 【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏

    display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...

  6. 【从0到1学Web前端】javascript中的ajax对象（一） 分类： JavaScript 2015-06-24 10:18 754人阅读 评论(1) 收藏

    现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看 ...

  7. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  8. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  9. 想转行做程序员，目前想学WEB前端，想问该自学还是报培训班

    首先我们还是先看一下WEB前端目前的工资情况吧,我在IT招聘网站拉勾网来进行搜索1-3年WEB前端工作经验大专学历的条件来看. 深圳: 可以看出目前深圳的平均的工资都在10K以上,因为大城市给的机会多 ...

随机推荐

  1. [VBS]_[活动分组程序]

    场景: 1.每次搞活动都需要分组,比如20个人分3个组,如何才能更公平的分组,想到的只能是随机分组程序. 2.时间关系并没有实现男女平衡的分组,有时间的哥们可以自己实现. 文件1:分组程序.vbs,记 ...

  2. TTimerThread和TThreadedTimer（都是通过WaitForSingleObject和CreateEvent来实现的）

    //////////////////////////////////////////////////// // // // ThreadedTimer 1.24 // // // // Copyrig ...

  3. Eclipse Package Explorer视图无法打开

    打开Eclipse后Package Explorer视图无法打开,显示一个红叉,红叉后面的Deatils后,显示下面的内容: java.lang.ArrayIndexOutOfBoundsExcept ...

  4. 【学习opencv第六篇】图像的反转操作

    考试终于完了,现在终于有时间可以继续学习这个了.写这篇博客主要是因为以前一直搞不清楚图像数据到底是怎么存储的,以及这个step到底是什么,后来查了一下才知道原来step就是数据行的长度.. #incl ...

  5. OpenGL教程之新手上路

    Jeff Molofee(NeHe)的OpenGL教程- 新手上路 译者的话:NeHe的教程一共同拥有30多课,内容翔实,而且不断更新 .国内的站点实在应该向他们学习.令人吃惊的是,NeHe提供的例程 ...

  6. 不包含SDK头文件, 补全API定义

    /// @file main.cpp /// @brief 不包含SDK头文件, 补全API定义 #ifdef __cplusplus extern "C" { #endif /* ...

  7. [转载]关于网传JDK1.7语法层次支持集合的问题

    以  JDK1.7新特性 为关键词进行百度的话,总能发现这样的描述,说: 从语法层面上支持集合,不再是数组的专利.还有这样的例子: final List<Integer> piDigits ...

  8. 国内使用Google Maps JavaScript API

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="ini ...

  9. Inhouse interview(websense)

    1.Tell me about yourself? My name is xxx,i 'm from xxx. now , I am a postgratuation and my major sub ...

  10. 基于visual Studio2013解决C语言竞赛题之1059最大平台

       题目 解决代码及点评 /* 功能:编写求最大平台问题的程序. 有n个整数a1,a2, ... an, 若满足a1≤a2≤ ... ≤ an , 则认为在这n个数中有最大平台.在这种情 ...