伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助。其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要。

名字

实例

说明

:link

a:link

选择所有未被访问的链接

:visited

a:visited

被访问的链接

:active

a:active

所有活动的链接

:hover

a:hover

鼠标所在的链接

:focus

Input:focus

获得焦点的input的css

:first-letter

P:first-letter

P元素的首字母样式

:first-line

P:first-line

P元素的首行样式

:first-child

P:first-child

选择属于父元素的第一个子元素的每个 <p> 元素。

:before

P:before

P元素之前插入信息

:after

P:after

P元素之后插入信息

:lang(langugae)

P:lang(it)

选择以it开头的所有p元素

:first-of-type

P:first-of-type

选择属于其父元素的首个   <p> 元素的每个 <p> 元素。

:last-of-type

P:last-of-type

选择属于其父元素的最后   <p> 元素的每个 <p> 元素。

:only-of-type

P:only-of-type

选择属于其父元素唯一的   <p> 元素的每个 <p> 元素。

:only-child

P:only-child

选择属于其父元素唯一子元素的所有p元素

:nth-child(n)

P:nth-child(2)

选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-last-child(n)

P:nth-last-child(2)

从最后一个元素开始计数,选择属于其父元素的第二个子元素的每个 <p> 元素。

:nth-of-type(n)

P:nth-of-type(2)

选择属于其父元素的第二个p元素的每个p元素

:nth-last-of-type(n)

P:nth-last-of-type(2)

从最后开始计数的选择属于器父元素第二个p元素的每个p元素

:last-child

P:last-child

选择其父元素的最后一个元素的每个p元素

:root

:root

根元素的css

:empty

P:empty

选择没有子元素的每个p元素,包含文本信息

:target

#new:target

当前活动的#new元素

:enabled

Input:enabled

选择每个启用的input元素

:disabled

Input:disabled

选择每个禁用的input元素

:checked

Input:checked

选择被选择的input元素

:not(selector)

:not(p)

选择非p元素的元素

::selection

::selection

选择被用户选取的部分元素

列举实例:

/* 未被访问时,正常情况下*/
a:link{color: #ff3324;}
/*点击后时的状态*/
a:visited{color: #1E7DB9;}
/*活动的链接*/
a:active{color: #24d432;}
/*鼠标所在的链接*/
a:hover{color:#fcc100;}


#p1:before,#p2:before,#p3:before{
content: '我是p元素的前方!';
color:#b82929;
}

#p1:after,#p2:after,#p3:after{
content: '我是p元素的后方!';
color: #5eac6e;
}
-->

点击我


#p1:before,#p2:before,#p3:before{     content: '我是p元素的前方!';     color:#b82929; }
#p1:after,#p2:after,#p3:after{ content: '我是p元素的后方!'; color: #5eac6e; }
<p id="p1">你好,我是p1元素。</p> <p id="p2">你好,我是p2元素。</p> <p id="p3">你好,我是p3元素。</p>

你好,我是p1元素。

你好,我是p2元素。

你好,我是p3元素。

p:first-child{
color: #b82929;
} <div id="div1">
<p>你好!</p>
<p>你好!</p>
</div>

css的伪类选择器的使用的更多相关文章

  1. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  2. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  4. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  5. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  6. 前端开发HTML&css入门——伪类选择器和一些特殊的选择器

    伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...

  7. css之伪类选择器:before :after(::before ::after)

    一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before  :after的区别:css3中修订后的伪元素使用:: ...

  8. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  9. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

随机推荐

  1. NodeJS示例异步式(Asynchronous)IO与同步式Synchronous)IO

    理解IO      IO(Input/Output)通常是指计算机线程进行慈磁盘读写或者网络通信时的一种行为.   同步式(Synchronous)IO和异步式(Asynchronous )IO   ...

  2. Sqlserver建立Oracle的鏈接服務器

    --建立数据库链接服务器 EXEC sp_addlinkedserver @server =N'TestOracle', --要创建的链接服务器别名 @srvproduct=N'Oracle', -- ...

  3. CGI是什么 搜索了这么多,大致看明白了保留下来。

    转自:http://blog.chinaunix.net/uid-13408389-id-2894933.html 分类: CGI是什么 CGI是CommonGatewayInterface 的简称. ...

  4. GDB + gdbserver 远程调试mediaserver进程

    远程调试步骤 在Android设备上启动gdbserver并attach你想调试的进程,并指定监听调试命令的端口(此端口是TV上的端口) $ adb shell # ps |grep media  # ...

  5. 更改Mysql 密码的4种方法(转)

    原文:http://www.jb51.net/article/39454.htm 方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password f ...

  6. 程序猿学英语—In August the English learning summary

    时间真快,总结的7月份英语学习总结刚刚结束,转眼间又该对8月份的英语学习进行小节了. 进入8月初.下发了一个文档,用一个星期的时间学音标.纠音. 在王美的带领下我组也发起了纠音运动. 刚开 始纠音的时 ...

  7. 由浅到深理解ROS(1)

    ROS机器人操作系统 ( Robot Operating System 或简称 ROS),可以帮助提高机器人软件的开发效率.ROS能够提供类似传统操作系统的诸多功能,如硬件抽象.底层设备控制.常用功能 ...

  8. windows安装apache

    由于个人有强迫倾向,下载软件都喜欢从官网下载,摸索了好久终于摸清楚怎么从Apache官网下载windows安装版的Apache服务器了,现在分享给大家.   工具/原料   apache 方法/步骤 ...

  9. Github上好的Android开源框架

    1.volley 项目地址 https://github.com/smanikandan14/Volley-demo (1)  JSON,图像等的异步下载: (2)  网络请求的排序(scheduli ...

  10. github常见错误

    如果输入$ Git remote add origin git@github.com:djqiang(github帐号名)/gitdemo(项目名).git 提示出错信息:fatal: remote ...