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

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伪类和伪元素分类： HTML+CSS 2015-06-02 22:29 1065人阅读评论(0) 收藏的更多相关文章

1.PHP站内搜索分类： PHP开发实例 2015-07-31 22:48 4人阅读评论(0) 收藏
PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...
全方位分析Objcetive-C Runtime 分类： ios技术 2015-03-11 22:29 77人阅读评论(0) 收藏
本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言简介与Runtime交互 ...
UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读评论(0) 收藏
UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性创建UIViewC ...
UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图分类： iOS学习-UI 2015-07-02 22:09 68人阅读评论(0) 收藏
UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...
修改android应用包名分类： android 学习笔记 2015-07-16 22:48 4人阅读评论(0) 收藏
由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...
【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
CSS_Spirte实现原理分类： HTML+CSS 2015-04-28 22:58 531人阅读评论(0) 收藏
CSS Spirte就是所谓的把很多的小图标合并成一张大的图片,然后使用CSS的background-position属性,来动态的定位自己需要图标的位置.这样做的目的主要是减少HTTP请求,加快网页 ...
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 ...
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 ...

随机推荐

Redis和RabbitMQ在项目中的使用
一:Redis的使用 1.先引入pom.xml的依赖 <dependency> <groupId>redis.clients</groupId> <artif ...
巧用NULL模式解耦依赖
1. 初始应用A和应用B均用到了库libX.a中的类class A: 由于需求的变化,应用B需要库libM.a的能力,以便和服务M交互.为了复用和简化,通过类A间接提供,应用B不用修改代码,只需要重 ...
【repost】DOM CRUD
//DOM 的 CRUD // c 创建create // 1.直接往body中动态的添加标签(可以是任意类型)document.write('helloWorld');document.write( ...
Android内容提供者（Content provider）
使用ContentProvider共享数据当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据,但数据访 ...
SRM481
250pt 题意:上帝知道一个“先有鸡还是先有蛋”的答案,上帝和N<=10^6个人说了答案,不过有x个人故意告诉了他们错误的答案,然后有一个人问了这N个人问题的答案,有M个人说先有鸡,N-M个人 ...
ASP.NET Web API 框架研究 IoC容器 DependencyResolver
一.概念 1.IoC(Inversion of Control),控制反转即将依赖对象的创建和维护交给一个外部容器来负责,而不是应用本身.如,在类型A中需要使用类型B的实例,而B的实例的创建不是由A ...
unigui如何把webApp的子功能映射到微信公众号菜单
只需要用UniApplication.Parameters.Values[‘xxx’]读取url的参数然后调用就可以例如:要打开公众号菜单的取样送检指南查询模块,在自定义菜单设定:http://ww ...
一些LinuxC的小知识点（二）
一.read系统调用系统调用read的作用是:从与文件描述符filedes相关联的文件里读入nbytes个字节的数据,并把它们放到数据区buf中.它返回实际读入的字节数.这可能会小于请求 ...
[C#]Dapper学习笔记
1.安装,直接用nuget搜索Dapper就行,不过只支持框架4.5.1 2.数据库测试表 CREATE TABLE [dbo].[Student]( [ID] [bigint] NULL, ) NU ...
DDD Code First 迁移数据实现EF CORE的软删除，值对象迁移配置
感谢Jeffcky大佬的博客: EntityFramework Core 2.0全局过滤 (HasQueryFilter) https://www.cnblogs.com/CreateMyself/p ...

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